add auto-selecotr to home page and handle set in data, search in specialties and send req for filter && add locations and change text

app/component/ItemDoctor.js

@@ -83,7 +83,9 @@ function ItemDoctor({ doctor }) {
                     }`}
         >
           {Number(doctor?.active)
-            ? `اولین نوبت آزاد: ${moment(doctor?.free_turn * 1000)?.format("dddd jD jMMMM")}`
+            ? `اولین نوبت آزاد: ${moment(doctor?.free_turn * 1000).format(
+                "dddd jD jMMMM [ساعت] HH:mm"
+              )}`
             : "نوبت ندارد"}
         </p>
       </CustomLoading>

app/doctors/page.js

@@ -11,7 +11,8 @@ async function Doctors({ searchParams }) {
   let doctors = null;
   try {
     let newSearchParams = searchParams;
-    if (matchedCity) newSearchParams.city = matchedCity.name;
+    if (matchedCity && matchedCity.id !== "63")
+      newSearchParams.city = matchedCity.name;
     if (matchedState) newSearchParams.state = matchedState.name;
     const params = buildDoctorParams(searchParams);
 

components/doctor/detailDoctor/Title.js

@@ -31,9 +31,9 @@ function Title({ doctor }) {
         <TextLoading width={100} height={20}>
           <h3 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
             تخصص:
-            {doctor?.expertise?.map(
+            {doctor?.specialties?.map(
               (item, idx) =>
-                `${item.name} ${doctor.expertise.length === idx + 1 ? "" : "|"} `
+                `${item.name} ${doctor.specialties.length === idx + 1 ? "" : "|"} `
             )}
           </h3>
         </TextLoading>

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -44,7 +44,7 @@ function AboutDcotor({ doctor }) {
           تخصص ها
         </p>
         <ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4">
-          {doctor?.specialties?.map((item, idx) => (
+          {doctor?.expertise?.map((item, idx) => (
             <li key={idx} className="flex items-center justify-start gap-1">
               <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
               <TextLoading width={70} height={18}>

components/doctor/detailDoctor/cards/locations/Item.js

@@ -7,7 +7,7 @@ import ModalOpenLocation from "@/app/component/openLocation";
 import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
 import RoutingC from "@/components/icons/RoutingC";
 
-function Item({ data }) {
+function Item({ doctor, data }) {
   const [isOpen, setIsOpen] = useState(false);
 
   const [open, setOpen] = useState(false);
@@ -25,7 +25,7 @@ function Item({ data }) {
         onClick={() => setIsOpen(!isOpen)}
         className="!px-[2px] !py-[4px] !flex !items-center !justify-between !w-full"
       >
-        <p className="text-[#616161] text-[16px] font-medium">{data.title}</p>
+        <p className="text-[#616161] text-[16px] font-medium">{data.name}</p>
         <div
           className={`
                         transition-all duration-500
@@ -46,11 +46,11 @@ function Item({ data }) {
             آدرس: {data.address}
           </p>
           <p className="text-[#525252] text-[16px] font-normal">
-            تلفن: {data.phone}
+            تلفن: {data.telephone}
           </p>
           <div className="flex w-full items-center justify-between">
             <p className="text-[#525252] text-[16px] font-normal">
-              روزهای کاری: {data.working_days}
+              روزهای کاری: {doctor.hours_of_work}
             </p>
             <ModalOpenLocation
               open={open}
@@ -70,14 +70,13 @@ function Item({ data }) {
         </div>
         <div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
           <iframe
-            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
+            src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}
-            className="
+            className="w-full rounded-lg mt-4 h-full"
-                            w-full rounded-lg mt-4 h-full
-                        "
             referrerPolicy="no-referrer-when-downgrade"
             allowFullScreen=""
             loading="lazy"
           ></iframe>
+
           <ModalOpenLocation
             open={open}
             setOpen={setOpen}

components/doctor/detailDoctor/cards/locations/index.js

@@ -8,11 +8,11 @@ function Locations({ doctor }) {
         موقعیت مکانی{" "}
       </p>
       <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
-        {doctor?.locations?.map((item, idx) => (
+        {doctor?.address?.map((item, idx) => (
           <CustomLoading key={idx} width="full" height={40}>
             <li className="w-full">
-              <Item data={item} />
+              <Item doctor={doctor} data={item} />
-              {doctor?.locations.length > idx + 1 && (
+              {doctor?.address.length > idx + 1 && (
                 <span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
               )}
             </li>

components/doctor/index.js

@@ -12,9 +12,9 @@ function DoctorPage({ doctor, doctors, comments }) {
         <CustomLoading width={180} height={25}>
           <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
             <h2 className="text-[#9B9B9B] text-nowrap">
-              {doctor?.expertise?.map(
+              {doctor?.specialties?.map(
                 (item, idx) =>
-                  `${item.name} ${doctor.expertise.length === idx + 1 ? ">" : "|"} `
+                  `${item.name} ${doctor.specialties.length === idx + 1 ? ">" : "|"} `
               )}
             </h2>
             <p className="text-[#525252] text-nowrap mr-1">{doctor?.name}</p>

components/doctors/search/SearchField.js

@@ -1,33 +1,16 @@
-import { TextField } from "@mui/material";
+import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
-import React from "react";
+import specialties from "@/data/specialties.json";
 
 function SearchField({ filter, updateData }) {
   return (
-    <TextField
+    <div className="!min-w-[50%] !w-[524px]">
-      variant="standard"
+      <AutoCompleteSearch
-      value={filter.name}
+        data={specialties}
-      onChange={(e) => updateData("name", e.target.value)}
+        inputValue={filter.name}
-      InputProps={{
+        handleSearch={(e) => updateData("name", e)}
-        disableUnderline: true,
+        placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
-      }}
+      />
-      sx={{
+    </div>
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        width: "100% !important",
-        "& .MuiInput-root": {
-          padding: "0",
-          borderBottom: "none",
-        },
-        "& .MuiInputBase-input": {
-          color: "#6C757D",
-          padding: "0px",
-        },
-      }}
-      dir="rtl"
-      placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
-      className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
-    />
   );
 }
 

components/doctors/search/SendReq.js

@@ -1,14 +1,43 @@
 import { Button } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
 import { useState } from "react";
+import specialties from "@/data/specialties.json";
 
-function SendReq({ sendReq }) {
+function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
   const [loading, setLoading] = useState(false);
+  const checkName = () => {
+    let newFilter = filter;
+    let reqData = filter;
+    const specialtyItem = specialties.find((item) =>
+      item.name.includes(filter.name)
+    );
+
+    if (specialtyItem) {
+      if (specialtyItem.parent) {
+        newFilter.specialty = specialtyItem;
+        newFilter.category = specialties.find(
+          (item) => item.id === specialtyItem.parent
+        );
+      } else {
+        newFilter.specialty = specialtyItem;
+      }
+      reqData = newFilter;
+      reqData.name = "";
+    } else {
+      reqData = newFilter;
+    }
+
+    setFilter(newFilter);
+    setDataInURL(newFilter);
+
+    return reqData;
+  };
 
   const filterData = () => {
     setLoading(true);
+    const reqData = checkName();
 
-    sendReq().finally(() => {
+    sendReq(reqData).finally(() => {
       setLoading(false);
     });
   };

components/doctors/search/index.js

@@ -5,13 +5,7 @@ import FilterModal from "../modal/FilterModal";
 import SendReq from "./SendReq";
 import SearchField from "./SearchField";
 
-function SearchBar({
+function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
-  filter,
-  sendReq,
-  setFilter,
-  updateData,
-  setDataInURL,
-}) {
   return (
     <ButtonGroup
       variant="contained"
@@ -43,7 +37,12 @@ function SearchBar({
         </Button>
       </FilterModal>
       <SearchField filter={filter} updateData={updateData} />
-      <SendReq sendReq={sendReq} />
+      <SendReq
+        filter={filter}
+        sendReq={sendReq}
+        setFilter={setFilter}
+        setDataInURL={setDataInURL}
+      />
     </ButtonGroup>
   );
 }

components/home/search/Fields.js

@@ -2,16 +2,18 @@
 
 import { useState } from "react";
 
-import FilterText from "./FilterText";
 import RedirectLink from "./RedirectLink";
 import ModalSearchCity from "./modal";
 import ButtonFilter from "./modal/ButtonFilter";
+import specialtiesData from "@/data/specialties.json";
+import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
 
 function Fields({ city, state }) {
   const [open, setOpen] = useState(false);
   const [data, setData] = useState({
     province: state?.name || "",
     city: city?.name || "",
+    search: "",
   });
 
   return (
@@ -26,7 +28,14 @@ function Fields({ city, state }) {
         <ButtonFilter setOpen={setOpen} selected={data} />
       </ModalSearchCity>
       <span className="black w-px bg-[#EFEFEF]"></span>
-      <FilterText data={data} setData={setData} />
+      <div className=" !w-full lg:!w-[524px]">
+        <AutoCompleteSearch
+          data={specialtiesData}
+          inputValue={data.search}
+          handleSearch={(e) => setData({ data, search: e })}
+          placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
+        />
+      </div>
       <RedirectLink data={data} />
     </>
   );

components/searchHead/smSearch/AutoCompleteSearch.js

@@ -20,9 +20,15 @@ function AutoCompleteSearch({
         handleSearch(newInputValue);
       }}
       onChange={(event, newValue) => {
-        setSelectedOption(newValue);
+        setSelectedOption && setSelectedOption(newValue);
         handleSearch(newValue ? newValue.name : "");
       }}
+      renderOption={(props, option) => (
+        <li {...props} key={option.id}>
+          {" "}
+          {option.name}
+        </li>
+      )}
       sx={{
         "& .MuiAutocomplete-input": {
           background: "#ffffff !important",

components/searchHead/smSearch/index.js

@@ -5,7 +5,6 @@ import AutoCompleteSearch from "./AutoCompleteSearch";
 
 function SmSearch({ placeholder, handleSearch, data }) {
   const [inputValue, setInputValue] = useState("");
-  const [selectedOption, setSelectedOption] = useState(null);
 
   return (
     <ButtonGroup
@@ -20,7 +19,6 @@ function SmSearch({ placeholder, handleSearch, data }) {
         placeholder={placeholder}
         handleSearch={handleSearch}
         setInputValue={setInputValue}
-        setSelectedOption={setSelectedOption}
       />
       <Button
         onClick={() => handleSearch(inputValue)}

components/specialties/index.js

@@ -15,7 +15,7 @@ function SpecialtiesPage() {
     setFilteredSpecialties(searchOnList(specialtiesData, value, "name"));
 
   return (
-    <div className="">
+    <>
       <HeadPageList
         title="تخصص مورد نظر شما چیست؟"
         detail="تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:"
@@ -27,7 +27,7 @@ function SpecialtiesPage() {
         />
       </HeadPageList>
       <List specialties={filteredSpecialties} />
-    </div>
+    </>
   );
 }