update modals & text & design

app/component/element/AutoCompleteSelect.js

@@ -10,13 +10,15 @@ function AutoCompleteSelect({
   name,
   label,
   disabled = false,
+  listboxProps
 }) {
   return (
     <Autocomplete
-      value={value || null}
       disablePortal
       options={list}
       disabled={disabled}
+      value={value || null}
+      ListboxProps={listboxProps}
       className="!w-full !rounded-lg auto-complete-selector"
       onChange={(event, newValue) => {
         updateData && updateData(newValue ? newValue.label : "", name);
@@ -25,9 +27,9 @@ function AutoCompleteSelect({
         ...styleTextSelectRight,
         // Hide Icon Number
         "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-          {
-            display: "none",
-          },
+        {
+          display: "none",
+        },
         "& input[type=number]": {
           MozAppearance: "textfield",
         },
@@ -46,13 +48,13 @@ function AutoCompleteSelect({
           border: "1px solid #D7D7D7",
         },
         "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
-          {
-            borderColor: "#D7D7D7 !important",
-          },
+        {
+          borderColor: "#D7D7D7 !important",
+        },
         "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
-          {
-            border: "1px solid #5559CE !important",
-          },
+        {
+          border: "1px solid #5559CE !important",
+        },
         "& .MuiOutlinedInput-notchedOutline": {
           border: isError ? "1px solid red !important" : "",
         },

app/component/element/Field.js

@@ -1,25 +1,22 @@
 import { TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function Field({
-  title,
-  type,
-  dir,
-  // isPlaceHolder
-}) {
+function Field({ title, type, dir, value, updateState }) {
   return (
     <TextField
       label={title}
       dir={dir || "rtl"}
       type={type || "text"}
+      value={value}
+      onChange={(e) => updateState(e.target.value)}
       className="!w-full !mx-auto !bg-[#FFF]"
       sx={{
         ...styleTextSelectRight,
         // Hide Icon Number
         "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-          {
-            display: "none",
-          },
+        {
+          display: "none",
+        },
         "& input[type=number]": {
           MozAppearance: "textfield",
         },

app/component/modalSearchCity/Content.js

@@ -15,6 +15,12 @@ function Content({
   isProvinceInclude,
 }) {
   const citySelected = selected.city;
+  const listboxProps = {
+    style: {
+      maxHeight: 200,
+      overflow: "auto",
+    },
+  };
 
   return (
     <div>
@@ -29,15 +35,17 @@ function Content({
         </p>
         <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
           <AutoCompleteSelect
-            updateData={updateData}
             value={selected && provinceSelected}
             disabled={isProvinceInclude}
+            listboxProps={listboxProps}
+            updateData={updateData}
             list={states}
             label="استان"
             name="province"
           />
           <AutoCompleteSelect
             updateData={updateData}
+            listboxProps={listboxProps}
             value={
               selected &&
               citySelected &&
@@ -50,8 +58,8 @@ function Content({
             disabled={
               isProvinceInclude
                 ? !isProvinceInclude ||
-                  !provinceSelected ||
-                  filteredCities.length === 0
+                !provinceSelected ||
+                filteredCities.length === 0
                 : !provinceSelected || filteredCities.length === 0
             }
           />

app/component/modalSearchCity/index.js

@@ -13,7 +13,10 @@ import { useProvince } from "@/context/ProvinceProvider";
 function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
   const provinceSelected = selected.province;
   const { isProvinceInclude } = useProvince();
-  const newProvinceData = isProvinceInclude?.id === 63;
+  const newProvinceData =
+    isProvinceInclude && isProvinceInclude.id === "63"
+      ? false
+      : isProvinceInclude;
 
   const [states, setStates] = useState([]);
   const [cities, setCities] = useState([]);
@@ -21,15 +24,12 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
 
   const handleClose = () => setOpen(false);
 
-  // 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,
@@ -40,7 +40,6 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
     setCities(formattedCities);
   }, []);
 
-  // Filter cities when state is selected
   useEffect(() => {
     if (provinceSelected) {
       const selectedState = states.find(
@@ -53,11 +52,11 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
         );
         setFilteredCities(filteredCities);
       }
-    } else if (isProvinceInclude) {
+    } else if (newProvinceData) {
       setSelected({
         ...selected,
         province: statesData.find(
-          (state) => state.id === isProvinceInclude.province_id
+          (state) => state.id === newProvinceData.province_id
         )?.name,
       });
     } else {
@@ -68,7 +67,6 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
 
   const updateData = (event, name) => {
     if (name === "province" && event !== provinceSelected) {
-      // If state changes, reset city selection
       setSelected({ province: event, city: "" });
     } else {
       setSelected({ ...selected, [name]: event });