From 574f7bf00581213205f107a0391e00f8672c9937 Mon Sep 17 00:00:00 2001
From: hamed Hosseini <genius.ha@gmail.com>
Date: Fri, 25 Apr 2025 17:11:24 +0330
Subject: [PATCH] feat: Implement dynamic state and city selection

- Load states and cities from JSON data files
- Filter cities based on selected state
- Update UI to disable city dropdown until state is selected
- Fix AutoCompleteSelect component to properly handle selection
- Reset city selection when state changes
- Display selected state and city in button
---
 app/component/element/AutoCompleteSelect.js |  10 +-
 components/home/search/modal/index.js       |  68 ++-
 data/city.json                              | 219 +++++++++
 data/state.json                             |  33 ++
 package-lock.json                           | 481 +++++++++++++++++++-
 package.json                                |   1 +
 6 files changed, 789 insertions(+), 23 deletions(-)
 create mode 100644 data/city.json
 create mode 100644 data/state.json

diff --git a/app/component/element/AutoCompleteSelect.js b/app/component/element/AutoCompleteSelect.js
index 15fae5e..c2301e1 100644
--- a/app/component/element/AutoCompleteSelect.js
+++ b/app/component/element/AutoCompleteSelect.js
@@ -2,14 +2,15 @@ import BottomSelect from "@/components/icons/BottomSelect";
 import { Autocomplete, Button, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function AutoCompleteSelect({ list, isError, updateData, name, label }) {
+function AutoCompleteSelect({ list, isError, updateData, name, label, disabled = false }) {
   return (
     <Autocomplete
       disablePortal
       options={list}
+      disabled={disabled}
       className="!w-full !rounded-lg auto-complete-selector"
-      onChange={(event) => {
-        updateData && updateData(event.target.innerText, "value", name);
+      onChange={(event, newValue) => {
+        updateData && updateData(newValue ? newValue.label : "", name);
       }}
       sx={{
         ...styleTextSelectRight,
@@ -51,8 +52,7 @@ function AutoCompleteSelect({ list, isError, updateData, name, label }) {
         <Button
           fullWidth
           {...props}
-          style={{}}
-          key={props.id}
+          key={option.id || props.id}
           className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
         >
           {option.label}
diff --git a/components/home/search/modal/index.js b/components/home/search/modal/index.js
index e3af4f1..d4c4894 100644
--- a/components/home/search/modal/index.js
+++ b/components/home/search/modal/index.js
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Box, Button, Modal } from "@mui/material";
 
 // Icon
@@ -11,18 +11,14 @@ import CloseModalD from "@/components/icons/CloseModalD";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
 
-function ModalSearchCity() {
-  const states = [
-    { label: "تهران", id: 10 },
-    { label: "اصفهان", id: 20 },
-    { label: "مازندران", id: 30 },
-  ];
+// Data
+import statesData from "@/data/state.json";
+import citiesData from "@/data/city.json";
 
-  const cities = [
-    { label: "پردیس", id: 10 },
-    { label: "دماوند", id: 20 },
-    { label: "فیروزکوه", id: 30 },
-  ];
+function ModalSearchCity() {
+  const [states, setStates] = useState([]);
+  const [cities, setCities] = useState([]);
+  const [filteredCities, setFilteredCities] = useState([]);
 
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
@@ -33,8 +29,48 @@ function ModalSearchCity() {
     second: "",
   });
 
-  const updateData = (event, name) =>
-    setSelected({ ...selected, [name]: event });
+  // Load states and cities from JSON files
+  useEffect(() => {
+    // Format states data to match the structure expected by AutoCompleteSelect
+    const formattedStates = statesData.map(state => ({
+      label: state.name,
+      id: state.id
+    }));
+
+    // Format cities data
+    const formattedCities = citiesData.map(city => ({
+      label: city.name,
+      id: city.id,
+      province_id: city.province_id
+    }));
+
+    setStates(formattedStates);
+    setCities(formattedCities);
+  }, []);
+
+  // Filter cities when state is selected
+  useEffect(() => {
+    if (selected.first) {
+      const selectedState = states.find(state => state.label === selected.first);
+      if (selectedState) {
+        const stateId = selectedState.id;
+        const filteredCities = cities.filter(city => city.province_id === stateId);
+        setFilteredCities(filteredCities);
+      }
+    } else {
+      setFilteredCities([]);
+      setSelected({ ...selected, second: "" });
+    }
+  }, [selected.first, cities, states]);
+
+  const updateData = (event, name) => {
+    if (name === "first" && event !== selected.first) {
+      // If state changes, reset city selection
+      setSelected({ first: event, second: "" });
+    } else {
+      setSelected({ ...selected, [name]: event });
+    }
+  };
 
   return (
     <>
@@ -82,9 +118,10 @@ function ModalSearchCity() {
               />
               <AutoCompleteSelect
                 updateData={updateData}
-                list={cities}
+                list={filteredCities}
                 name="second"
                 label="شهر"
+                disabled={!selected.first || filteredCities.length === 0}
               />
             </div>
             <div className="w-full flex justify-end">
@@ -93,6 +130,7 @@ function ModalSearchCity() {
                 onClick={handleClose}
                 variant="contained"
                 color="primary"
+                disabled={!selected.first || !selected.second}
               >
                 تایید و ادامه
                 <ArrowLeftM />
diff --git a/data/city.json b/data/city.json
new file mode 100644
index 0000000..5424e54
--- /dev/null
+++ b/data/city.json
@@ -0,0 +1,219 @@
+[
+  {
+    "id": "1",
+    "type": "2",
+    "province_id": "1",
+    "name": "تبریز",
+    "domain": "tabriz-nobat.ir"
+  },
+  {
+    "id": "2",
+    "type": "2",
+    "province_id": "2",
+    "name": "ارومیه",
+    "domain": "urmia-nobat.ir"
+  },
+  {
+    "id": "3",
+    "type": "2",
+    "province_id": "3",
+    "name": "اردبیل",
+    "domain": "ardabil-nobat.ir"
+  },
+  {
+    "id": "4",
+    "type": "2",
+    "province_id": "4",
+    "name": "اصفهان",
+    "domain": "esf-nobat.ir"
+  },
+  {
+    "id": "5",
+    "type": "2",
+    "province_id": "5",
+    "name": "کرج",
+    "domain": "karaj-nobat.ir"
+  },
+  {
+    "id": "6",
+    "type": "2",
+    "province_id": "6",
+    "name": "ایلام",
+    "domain": "ilam-nobat.ir"
+  },
+  {
+    "id": "7",
+    "type": "2",
+    "province_id": "7",
+    "name": "بوشهر",
+    "domain": "bushehr-nobat.ir"
+  },
+  {
+    "id": "8",
+    "type": "2",
+    "province_id": "8",
+    "name": "تهران",
+    "domain": "tehran-nobat.ir"
+  },
+  {
+    "id": "9",
+    "type": "2",
+    "province_id": "9",
+    "name": "شهرکرد",
+    "domain": "shkord-nobat.ir"
+  },
+  {
+    "id": "10",
+    "type": "2",
+    "province_id": "10",
+    "name": "بیرجند",
+    "domain": "birjand-nobat.ir"
+  },
+  {
+    "id": "11",
+    "type": "2",
+    "province_id": "11",
+    "name": "مشهد",
+    "domain": "mashhad-nobat.ir"
+  },
+  {
+    "id": "12",
+    "type": "2",
+    "province_id": "12",
+    "name": "بجنورد",
+    "domain": "bojnord-nobat.ir"
+  },
+  {
+    "id": "13",
+    "type": "2",
+    "province_id": "13",
+    "name": "اهواز",
+    "domain": "ahvaz-nobat.ir"
+  },
+  {
+    "id": "14",
+    "type": "2",
+    "province_id": "14",
+    "name": "زنجان",
+    "domain": "zanjan-nobat.ir"
+  },
+  {
+    "id": "15",
+    "type": "2",
+    "province_id": "15",
+    "name": "سمنان",
+    "domain": "semnan-nobat.ir"
+  },
+  {
+    "id": "16",
+    "type": "2",
+    "province_id": "16",
+    "name": "زاهدان",
+    "domain": "zahedan-nobat.ir"
+  },
+  {
+    "id": "17",
+    "type": "2",
+    "province_id": "17",
+    "name": "شیراز",
+    "domain": "shiraz-nobat.ir"
+  },
+  {
+    "id": "18",
+    "type": "2",
+    "province_id": "18",
+    "name": "قزوین",
+    "domain": "qazvin-nobat.ir"
+  },
+  {
+    "id": "19",
+    "type": "2",
+    "province_id": "19",
+    "name": "قم",
+    "domain": "qom-nobat.ir"
+  },
+  {
+    "id": "20",
+    "type": "2",
+    "province_id": "20",
+    "name": "سنندج",
+    "domain": "sanandaj-nobat.ir"
+  },
+  {
+    "id": "21",
+    "type": "2",
+    "province_id": "21",
+    "name": "کرمان",
+    "domain": "kerman-nobat.ir"
+  },
+  {
+    "id": "22",
+    "type": "2",
+    "province_id": "22",
+    "name": "کرمانشاه",
+    "domain": "kermanshah-nobat.ir"
+  },
+  {
+    "id": "23",
+    "type": "2",
+    "province_id": "23",
+    "name": "یاسوج",
+    "domain": "yasuj-nobat.ir"
+  },
+  {
+    "id": "24",
+    "type": "2",
+    "province_id": "24",
+    "name": "گرگان",
+    "domain": "golestan-nobat.ir"
+  },
+  {
+    "id": "25",
+    "type": "2",
+    "province_id": "25",
+    "name": "رشت",
+    "domain": "rasht-nobat.ir"
+  },
+  {
+    "id": "26",
+    "type": "2",
+    "province_id": "26",
+    "name": "خرم‌آباد",
+    "domain": "lorestan-nobat.ir"
+  },
+  {
+    "id": "27",
+    "type": "2",
+    "province_id": "27",
+    "name": "ساری",
+    "domain": "sari-nobat.ir"
+  },
+  {
+    "id": "28",
+    "type": "2",
+    "province_id": "28",
+    "name": "اراک",
+    "domain": "arak-nobat.ir"
+  },
+  {
+    "id": "29",
+    "type": "2",
+    "province_id": "29",
+    "name": "بندرعباس",
+    "domain": "bandar-nobat.ir"
+  },
+  {
+    "id": "30",
+    "type": "2",
+    "province_id": "30",
+    "name": "همدان",
+    "domain": "hamadan-nobat.ir"
+  },
+  {
+    "id": "31",
+    "type": "2",
+    "province_id": "31",
+    "name": "یزد",
+    "domain": "yazd-nobat.ir"
+  } 
+]
diff --git a/data/state.json b/data/state.json
new file mode 100644
index 0000000..4fde4e2
--- /dev/null
+++ b/data/state.json
@@ -0,0 +1,33 @@
+[
+  { "id": "1", "name": "آذربایجان شرقی" },
+  { "id": "2", "name": "آذربایجان غربی" },
+  { "id": "3", "name": "اردبیل" },
+  { "id": "4", "name": "اصفهان" },
+  { "id": "5", "name": "البرز" },
+  { "id": "6", "name": "ایلام" },
+  { "id": "7", "name": "بوشهر" },
+  { "id": "8", "name": "تهران" },
+  { "id": "9", "name": "چهارمحال و بختیاری" },
+  { "id": "10", "name": "خراسان جنوبی" },
+  { "id": "11", "name": "خراسان رضوی" },
+  { "id": "12", "name": "خراسان شمالی" },
+  { "id": "13", "name": "خوزستان" },
+  { "id": "14", "name": "زنجان" },
+  { "id": "15", "name": "سمنان" },
+  { "id": "16", "name": "سیستان و بلوچستان" },
+  { "id": "17", "name": "فارس" },
+  { "id": "18", "name": "قزوین" },
+  { "id": "19", "name": "قم" },
+  { "id": "20", "name": "کردستان" },
+  { "id": "21", "name": "کرمان" },
+  { "id": "22", "name": "کرمانشاه" },
+  { "id": "23", "name": "کهگیلویه و بویراحمد" },
+  { "id": "24", "name": "گلستان" },
+  { "id": "25", "name": "گیلان" },
+  { "id": "26", "name": "لرستان" },
+  { "id": "27", "name": "مازندران" },
+  { "id": "28", "name": "مرکزی" },
+  { "id": "29", "name": "هرمزگان" },
+  { "id": "30", "name": "همدان" },
+  { "id": "31", "name": "یزد" }
+]
diff --git a/package-lock.json b/package-lock.json
index 7609968..0c5b31e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "react-google-map-picker": "^1.2.3",
         "react-images-uploading": "^3.1.7",
         "react-toastify": "^10.0.6",
+        "sharp": "^0.34.1",
         "styled-components": "^6.1.11",
         "stylis": "^4.3.4",
         "stylis-plugin-rtl": "^2.1.1",
@@ -2387,6 +2388,16 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
+      "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -2684,6 +2695,383 @@
       "deprecated": "Use @eslint/object-schema instead",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.1.tgz",
+      "integrity": "sha512-pn44xgBtgpEbZsu+lWf2KNb6OAf70X68k+yk69Ic2Xz11zHR/w24/U49XT7AeRwJ0Px+mhALhU5LPci1Aymk7A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.1.tgz",
+      "integrity": "sha512-VfuYgG2r8BpYiOUN+BfYeFo69nP/MIwAtSJ7/Zpxc5QF3KS22z8Pvg3FkrSFJBPNQ7mmcUcYQFBmEQp7eu1F8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.1.0.tgz",
+      "integrity": "sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.1.0.tgz",
+      "integrity": "sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.1.0.tgz",
+      "integrity": "sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.1.0.tgz",
+      "integrity": "sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.1.0.tgz",
+      "integrity": "sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.1.0.tgz",
+      "integrity": "sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz",
+      "integrity": "sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.1.0.tgz",
+      "integrity": "sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.1.0.tgz",
+      "integrity": "sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.1.tgz",
+      "integrity": "sha512-anKiszvACti2sGy9CirTlNyk7BjjZPiML1jt2ZkTdcvpLU1YH6CXwRAZCA2UmRXnhiIftXQ7+Oh62Ji25W72jA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.1.tgz",
+      "integrity": "sha512-kX2c+vbvaXC6vly1RDf/IWNXxrlxLNpBVWkdpRq5Ka7OOKj6nr66etKy2IENf6FtOgklkg9ZdGpEu9kwdlcwOQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.1.tgz",
+      "integrity": "sha512-7s0KX2tI9mZI2buRipKIw2X1ufdTeaRgwmRabt5bi9chYfhur+/C1OXg3TKg/eag1W+6CCWLVmSauV1owmRPxA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.1.tgz",
+      "integrity": "sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.1.tgz",
+      "integrity": "sha512-DfvyxzHxw4WGdPiTF0SOHnm11Xv4aQexvqhRDAoD00MzHekAj9a/jADXeXYCDFH/DzYruwHbXU7uz+H+nWmSOQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.1.tgz",
+      "integrity": "sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.1.0"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.1.tgz",
+      "integrity": "sha512-YDybQnYrLQfEpzGOQe7OKcyLUCML4YOXl428gOOzBgN6Gw0rv8dpsJ7PqTHxBnXnwXr8S1mYFSLSa727tpz0xg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.4.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.1.tgz",
+      "integrity": "sha512-WKf/NAZITnonBf3U1LfdjoMgNO5JYRSlhovhRhMxXVdvWYveM4kM3L8m35onYIdh75cOMCo1BexgVQcCDzyoWw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.1.tgz",
+      "integrity": "sha512-hw1iIAHpNE8q3uMIRCgGOeDoz9KtFNarFLQclLxr/LK1VBkj8nby18RjFvr6aP7USRYAjTZW6yisnBWMX571Tw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -7360,6 +7748,19 @@
       "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==",
       "license": "MIT"
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -7378,6 +7779,16 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -8443,6 +8854,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-newline": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -20011,9 +20431,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -20216,6 +20636,46 @@
       "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
       "license": "MIT"
     },
+    "node_modules/sharp": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.1.tgz",
+      "integrity": "sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.7.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.1",
+        "@img/sharp-darwin-x64": "0.34.1",
+        "@img/sharp-libvips-darwin-arm64": "1.1.0",
+        "@img/sharp-libvips-darwin-x64": "1.1.0",
+        "@img/sharp-libvips-linux-arm": "1.1.0",
+        "@img/sharp-libvips-linux-arm64": "1.1.0",
+        "@img/sharp-libvips-linux-ppc64": "1.1.0",
+        "@img/sharp-libvips-linux-s390x": "1.1.0",
+        "@img/sharp-libvips-linux-x64": "1.1.0",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0",
+        "@img/sharp-libvips-linuxmusl-x64": "1.1.0",
+        "@img/sharp-linux-arm": "0.34.1",
+        "@img/sharp-linux-arm64": "0.34.1",
+        "@img/sharp-linux-s390x": "0.34.1",
+        "@img/sharp-linux-x64": "0.34.1",
+        "@img/sharp-linuxmusl-arm64": "0.34.1",
+        "@img/sharp-linuxmusl-x64": "0.34.1",
+        "@img/sharp-wasm32": "0.34.1",
+        "@img/sharp-win32-ia32": "0.34.1",
+        "@img/sharp-win32-x64": "0.34.1"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -20327,6 +20787,21 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "license": "ISC"
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT"
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
diff --git a/package.json b/package.json
index 310151f..cef3e17 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "react-google-map-picker": "^1.2.3",
     "react-images-uploading": "^3.1.7",
     "react-toastify": "^10.0.6",
+    "sharp": "^0.34.1",
     "styled-components": "^6.1.11",
     "stylis": "^4.3.4",
     "stylis-plugin-rtl": "^2.1.1",