show only the first item in appo list & update appo item text && change key in /doctors page URL && handle setting and updating data on first modal filter load

app/component/date/dateTime/SendAppo.js

@@ -20,9 +20,10 @@ function SendAppo({ hour }) {
         setLoading(false);
       })
       .catch(() => {
-        // 
+        //
       });
   };
+  console.log(hour);
 
   return (
     <div className="w-full flex justify-end">

app/component/date/dateTime/hours/List.js

@@ -3,6 +3,7 @@ import React from "react";
 
 function List({ appo, hour, setHour, value }) {
   const list = appo && appo[value ? "evening" : "morning"];
+  const checkHour = (item) => JSON.stringify(item) === JSON.stringify(hour);
 
   if (list && list.length) {
     return (
@@ -14,14 +15,14 @@ function List({ appo, hour, setHour, value }) {
               disabled={!item.status === "available"}
               className={`
                           !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
-                          ${JSON.stringify(item) === JSON.stringify(hour) ? "!bg-[#F79463] " : ""}
+                          ${checkHour(item) ? "!bg-[#F79463] " : ""}
                       `}
             >
               <p
                 className={`
                           text-[16px] font-semibold text-[#525252]
                           ${item.status === "available" ? "text-[#525252]" : "text-[#D7D7D7]"}
-                          ${JSON.stringify(item) === JSON.stringify(hour) ? "!text-[#FAFAFA] " : ""}
+                          ${checkHour(item) ? "!text-[#FAFAFA] " : ""}
                       `}
               >
                 {item.time}

components/appointment/date/PlaceVisit.js

@@ -1,29 +0,0 @@
-"use client";
-
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-
-function PlaceVisit({ locateVisit, setLocateVisit, isError }) {
-  const clinics = [
-    { label: "درمانگاه رازی", id: 10 },
-    { label: "درمانگاه ابوعلی", id: 20 },
-    { label: "درمانگاه مرکزی", id: 30 },
-  ];
-
-  const updateData = (event) => setLocateVisit(event);
-
-  return (
-    <div className="flex flex-col items-start gap-[19px] justify-start">
-      <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
-        1. انتخاب محل ویزیت
-      </p>
-      <AutoCompleteSelect
-        isError={isError && !locateVisit}
-        updateData={updateData}
-        label="درمانگاه"
-        list={clinics}
-      />
-    </div>
-  );
-}
-
-export default PlaceVisit;

components/appointment/date/Time/index.js

@@ -4,7 +4,7 @@ function Time({ isStep, setDate }) {
   return (
     <div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
-        2. انتخاب روز
+        1. انتخاب روز
       </p>
       <SelectDatePicker setDate={setDate} />
       {!isStep && (

components/appointment/date/hour/index.js

@@ -1,16 +1,15 @@
 import DateTime from "@/app/component/date/dateTime";
 
-function Hour({ doctor, setStep, date, setIsError, locateVisit, isStep }) {
+function Hour({ doctor, setStep, date, locateVisit, isStep }) {
   return (
     <div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
-        3. انتخاب ساعت
+        2. انتخاب ساعت
       </p>
       <DateTime
         date={date}
         doctor={doctor}
         setStep={setStep}
-        setIsError={setIsError}
         locateVisit={locateVisit}
       />
       {!isStep && (

components/appointment/date/index.js

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import Hour from "./hour";
 import Time from "./Time";
-import PlaceVisit from "./PlaceVisit";
 
 function Date({ doctor, setStep }) {
   const [locateVisit, setLocateVisit] = useState(true);
@@ -14,11 +13,6 @@ function Date({ doctor, setStep }) {
         className="p-0 lg:p-[24px] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] 
             bg-transparent lg:bg-[#FFF]"
       >
-        <PlaceVisit
-          setLocateVisit={setLocateVisit}
-          locateVisit={locateVisit}
-          isError={isError}
-        />
         <Time
           setDate={setDate}
           locateVisit={locateVisit}
@@ -28,7 +22,6 @@ function Date({ doctor, setStep }) {
           isStep={doctor?.multiwork ? locateVisit : true}
           setLocateVisit={setLocateVisit}
           locateVisit={locateVisit}
-          setIsError={setIsError}
           setStep={setStep}
           doctor={doctor}
           date={date}

components/doctor/appointmentList/ItemAppointment.js

@@ -39,7 +39,7 @@ function ItemAppointment({ turn, loading }) {
           <GreenCalendarTurn />
           <TextLoading width={100} height={15} loading={loading}>
             <p className="text-[#05BA58] text-[12px] font-medium">
-              اولین نوبت آزاد: {turn.first_free_turn}
+              اولین نوبت آزاد: {turn.first_free_turn || "یکشنبه 24 اردیبهشت"}
             </p>
           </TextLoading>
         </div>

components/doctor/appointmentList/index.js

@@ -9,9 +9,13 @@ function AppointmentList({ doctors, loading }) {
   return (
     <>
       <ul className="hidden sticky top-[122px] sm:top-[150px] mt:top-[178px] lg:top-[206px] lg:flex w-[38%] flex-col justify-start items-center gap-8">
-        {doctors?.map((item) => (
+        {doctors && doctors.length && (
-          <ItemAppointment turn={item} key={item.id} loading={loading} />
+          <ItemAppointment
-        ))}
+            loading={loading}
+            turn={doctors[0]}
+            key={doctors[0].id}
+          />
+        )}
       </ul>
       <div
         className="fixed lg:hidden bg-[#FFF] border-t border-transparent border-t-[#D7D7D7] 

components/doctors/index.js

@@ -12,21 +12,25 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 import specialties from "@/data/specialties.json";
 
 function DoctorsPage({ params, matchedCity, matchedState, list }) {
+  const fieldId = params.field;
   const [loading, setLoading] = useState(true);
   const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState({
     province: matchedState?.name || params?.province,
     city: matchedCity?.name || params?.city,
   });
+  console.log(specialties);
+  // console.log(fieldId);
+
+  const findItem = (id) => specialties.find((item) => item.id === id);
+  const isParent = findItem(fieldId) && findItem(fieldId).parent;
+  console.log(isParent);
+
   const findSpecial = (id) => specialties.find((item) => item.id === id);
 
   const [data, setData] = useState({
-    category: findSpecial(params.specialties)?.parent
+    category: isParent ? findItem(isParent) : findItem(fieldId),
-      ? findSpecial(findSpecial(params.specialties)?.parent)
+    specialties: isParent && findItem(fieldId),
-      : findSpecial(params.specialties) || "",
-    specialties: findSpecial(params.specialties)?.parent
-      ? findSpecial(params.specialties)
-      : "",
     turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
     gender: params.gender || "هر دو",
     degree: params.degree || "همه موارد",

components/doctors/modal/Content.js

@@ -12,27 +12,30 @@ function Content({ data, setData }) {
     router.push(`/doctors?${queryString}`);
   };
 
-  const changeData = (value, name, isCategory) => {
+  const changeData = (value, name, isCategory, key) => {
-    changeUrl(value, name);
+    const newData = { ...data, [name]: value };
-    const newData = data;
+
-    newData[name] = value;
-    const childrenList = specialties.filter((item) => item.parent);
-    const filteredChildrenList = childrenList.filter(
-      (item) => item.parent === value.id
-    );
     if (isCategory) {
-      newData.specialties = "";
+      const childrenList = specialties.filter((item) => item.parent);
-      newData.specialties = filteredChildrenList[0];
+      const filteredChildrenList = childrenList.filter(
+        (item) => item.parent === value.id
+      );
+      const firstChildren = filteredChildrenList[0];
+      console.log(firstChildren);
+
+      newData.specialties = firstChildren || "";
+      changeUrl(firstChildren || value, key);
+    } else {
+      changeUrl(value, key);
     }
+
     setData(newData);
     return newData;
   };
 
-  console.log(data);
-
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
-      <Form data={data} changeUrl={changeUrl} changeData={changeData} />
+      <Form data={data} changeData={changeData} />
     </div>
   );
 }

components/doctors/modal/form/CateSelector.js

@@ -0,0 +1,82 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function CateSelector({ list, value, isError, updateData, label }) {
+  return (
+    <Autocomplete
+      disablePortal
+      value={value}
+      options={list}
+      getOptionLabel={(option) => option?.name}
+      className="!w-full !rounded-lg auto-complete-selector"
+      onChange={(_, newValue) => updateData(newValue)}
+      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={option.id || 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 CateSelector;

components/doctors/modal/form/Radios.js

@@ -5,7 +5,7 @@ function Radios({ group, value, changeData, name }) {
     <RadioGroup
       value={value}
       className="radio-mui"
-      onChange={(e) => changeData(e.target.value, name)}
+      onChange={(e) => changeData(e.target.value, name, false, name)}
       sx={{
         "& .MuiFormControlLabel-root": {
           marginRight: "0 !important",

components/doctors/modal/form/index.js

@@ -1,37 +1,31 @@
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import SwitchContent from "./SwitchContent";
 import RadioContent from "./RadioContent";
 import { filterList } from "@/helper";
 import { useState } from "react";
+import CateSelector from "./CateSelector";
 
 const gender = ["زن", "مرد", "هر دو"];
 const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق تخصص", "همه موارد"];
 
-function Form({ data, changeUrl, changeData }) {
+function Form({ data, changeData }) {
-  const [list, setList] = useState({});
   const { parentList, childrenList } = filterList(data);
-  console.log(filterList(data));
 
   return (
     <>
-      <AutoCompleteSelect
+      <CateSelector
-        list={list.parentList}
+        list={parentList}
-        sendAll={true}
         label="دسته بندی"
-        value={data.category?.name}
+        value={data.category}
-        updateData={(value) => {
+        updateData={(value) => changeData(value, "category", true, "field")}
-          const newData = changeData(value, "specialties", true);
-          setList(filterList(newData));
-          console.log(newData);
-        }}
       />
       {!!childrenList.length && (
         <div className="mt-[24px]">
-          <AutoCompleteSelect
+          <CateSelector
-            list={list.childrenList}
+            list={childrenList}
-            updateData={(value) => changeData(value, "specialties")}
+            updateData={(value) =>
-            sendAll={true}
+              changeData(value, "specialties", false, "field")
-            value={data.specialties?.name}
+            }
+            value={data.specialties}
             label="تخصص"
           />
         </div>