send filter degree, gender and speciality with en name, handle set url in doctors page with searchbar home for key field or search, set value of province in url with id, change filter stars with ASC and DESC, bg-color of field in spcialties

components/home/search/FilterText.js

@@ -1,8 +1,46 @@
-import React from "react";
-import {  TextField } from "@mui/material";
+import { TextField } from "@mui/material";
 
 function FilterText({ data, setData }) {
   return (
+    // <Autocomplete
+    //   freeSolo
+    //   options={specialtiesData}
+    //   getOptionLabel={(option) => option.name}
+    //   // inputValue={inputValue}
+    //   className="!w-full"
+    //   onInputChange={(event, newInputValue) => {
+    //     // setInputValue && setInputValue(newInputValue);
+    //     // handleSearch(newInputValue);
+    //   }}
+    //   onChange={(event, newValue) => {
+    //     setSelectedOption(newValue);
+    //     handleSearch(newValue ? newValue.name : "");
+    //   }}
+    //   renderInput={(params) => (
+    //     <TextField
+    //       {...params}
+    //       variant="standard"
+    //       placeholder={placeholder}
+    //       dir="rtl"
+    //       InputProps={{
+    //         ...params.InputProps,
+    //         disableUnderline: true,
+    //         style: { height: "100%" },
+    //       }}
+    //       sx={{
+    //         background: "transparent !important",
+    //         "& .MuiInputBase-input": {
+    //           background: "#FAFAFA",
+    //           color: "#6C757D",
+    //           padding: "0 16px",
+    //           fontSize: "14px",
+    //           fontFamily: "inherit",
+    //         },
+    //       }}
+    //       className="!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal"
+    //     />
+    //   )}
+    // />
     <TextField
       variant="standard"
       onChange={(e) => setData({ ...data, search: e.target.value })}

components/home/search/RedirectLink.js

@@ -4,16 +4,30 @@ import SearchD from "@/components/icons/SearchD";
 import { Search } from "@mui/icons-material";
 import { Button } from "@mui/material";
 import { useRouter } from "next/navigation";
+import specialties from "@/data/specialties.json";
+import cities from "@/data/city.json";
 
 function RedirectLink({ data }) {
   const router = useRouter();
 
   const handleRedirect = () => {
-    const queryParams = new URLSearchParams({
-      province: data.province || "",
-      city: data.city || "",
-      search: data.search || "",
-    }).toString();
+    const filters = {};
+    if (data.province) {
+      const item = cities.find((item) => item.name === data.city);
+      filters.province = item.id;
+    }
+    if (data.search) {
+      const specialtyItem = specialties.find((item) =>
+        item.name.includes(data.search)
+      );
+      if (specialtyItem) {
+        filters.field = specialtyItem.name;
+      } else {
+        filters.search = data.search;
+      }
+    }
+
+    const queryParams = new URLSearchParams(filters).toString();
 
     router.push(`/doctors?${queryParams}`);
   };