round img of doctors && fix remove 'nobat724' value in city data for all pages && handle send req for filter clinics && filter list clinic for first time on load page && add component loading and handle it in page clinics

components/home/search/modal/AutoComplete.js

@@ -0,0 +1,93 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function AutoComplete({
+  list,
+  value,
+  isError,
+  updateData,
+  label,
+  disabled,
+  listboxProps,
+  name,
+}) {
+  return (
+    <Autocomplete
+      disablePortal
+      options={list}
+      disabled={disabled}
+      ListboxProps={listboxProps}
+      value={value || null}
+      getOptionLabel={(option) => option?.name || ""}
+      className="!w-full !rounded-lg auto-complete-selector"
+      onChange={(_, value) => updateData(name, value)}
+      sx={{
+        ...styleTextSelectRight,
+        // Hide Icon Number
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+          {
+            display: "none",
+          },
+        "& input[type=number]": {
+          MozAppearance: "textfield",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+        "& .MuiInputBase-root": {
+          borderRadius: 2,
+          padding: "0 !important",
+          height: {
+            xs: "43px !important",
+            sm: "43px !important",
+            md: "46px !important",
+            lg: "48px !important",
+          },
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #D7D7D7",
+        },
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: "#D7D7D7 !important",
+          },
+        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+          {
+            border: "1px solid #5559CE !important",
+          },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: isError ? "1px solid red !important" : "",
+        },
+      }}
+      renderOption={(props, option) => (
+        <Button
+          fullWidth
+          {...props}
+          key={props.id}
+          className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+        >
+          {option.name}
+        </Button>
+      )}
+      renderInput={(params) => (
+        <TextField
+          fullWidth
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <div className="absolute left-4">
+                <BottomSelect />
+              </div>
+            ),
+          }}
+          placeholder={label}
+          sx={{
+            borderRadius: "8px",
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default AutoComplete;

components/home/search/modal/Content.js

@@ -2,8 +2,8 @@ import { Button } from "@mui/material";
 
 // Icon
 import CloseModalD from "@/components/icons/CloseModalD";
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
+import AutoComplete from "./AutoComplete";
 
 function Content({
   state,
@@ -14,7 +14,6 @@ function Content({
   filteredCities,
   handleSearch,
 }) {
-  const citySelected = selected.city;
   const listboxProps = {
     style: {
       maxHeight: 200,
@@ -39,24 +38,19 @@ 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
-            value={selected.province}
-            disabled={state}
-            listboxProps={listboxProps}
-            updateData={updateData}
+          <AutoComplete
             list={states}
             label="استان"
             name="province"
+            disabled={state}
+            updateData={updateData}
+            value={selected.province}
+            listboxProps={listboxProps}
           />
-          <AutoCompleteSelect
+          <AutoComplete
             updateData={updateData}
             listboxProps={listboxProps}
-            value={
-              selected &&
-              citySelected &&
-              filteredCities.find((item) => item.name === citySelected) &&
-              citySelected
-            }
+            value={selected.city}
             list={filteredCities}
             name="city"
             label="شهر"
@@ -80,4 +74,4 @@ function Content({
   );
 }
 
-export default Content;
+export default Content;

components/home/search/modal/index.js

@@ -3,11 +3,10 @@
 import { useState, useEffect } from "react";
 import { Modal, Box } from "@mui/material";
 import { styleDefault } from "@/mui";
-import { addLabelToList } from "@/helper";
 
 // Data
-import statesData from "@/data/state.json";
-import citiesData from "@/data/city.json";
+import states from "@/data/state.json";
+import cities from "@/data/city.json";
 import Content from "./Content";
 import { useRouter } from "next/navigation";
 
@@ -17,14 +16,11 @@ function ModalSearchCity({
   setOpen,
   children,
   selected,
-  handleSearch,
   setSelected,
+  handleSearch,
 }) {
-  const provinceSelected = selected.province;
+  const provinceSelected = selected?.province?.name;
   const router = useRouter();
-
-  const states = addLabelToList(statesData);
-  const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
 
   const handleClose = () => setOpen(false);
@@ -32,7 +28,7 @@ function ModalSearchCity({
   useEffect(() => {
     if (provinceSelected) {
       const selectedState = states.find(
-        (state) => state.label === provinceSelected
+        (state) => state.name === provinceSelected
       );
       if (selectedState) {
         const stateId = selectedState.id;
@@ -46,15 +42,17 @@ function ModalSearchCity({
     }
   }, [provinceSelected]);
 
-  const updateData = (event, name) => {
+  const updateData = (name, event) => {
     const searchParams = new URLSearchParams(window.location.search);
 
     if (name === "province") {
       setSelected({ ...selected, province: event, city: "" });
-      searchParams.set("state", event);
+      searchParams.set("state", event?.name);
+      searchParams.set("city", selected.city?.name);
     } else {
       setSelected({ ...selected, [name]: event });
-      searchParams.set("city", event);
+      searchParams.set("city", event?.name);
+      searchParams.set("state", selected.province?.name);
     }
     router.push(`?${searchParams.toString()}`);
   };