remove additional code && fix bug select city and state && alert success and error message for comment in doctors page && handle set data after user searched in field doctors page && set data appointment from doctor data && set value in field search after user reload in doctors page

app/component/ProfressDetail.js

@@ -8,7 +8,7 @@ function ProgressDetail({ data }) {
         {data.label}
       </p>
       <LinearProgress
-        value={data.progress}
+        value={data}
         variant="determinate"
         className="!w-full lg:!w-[265px] !rounded-[10px] !bg-[#D7D7D7] !h-[11px]"
         sx={{
@@ -19,7 +19,7 @@ function ProgressDetail({ data }) {
         }}
       />
       <p className="text-[#525252] text-[20px] font-medium">
-        {numberToArStyle(data.progress)}%
+        {numberToArStyle(data)}%
       </p>
     </li>
   );

app/component/comment/ItemUser.js

@@ -9,7 +9,7 @@ import LikeComment from "@/components/icons/LikeComment";
 import Replies from "./Replies";
 import AnswerField from "./AnswerField";
 import SendAnswer from "./SendAnswer";
-import { timeAgo } from "@/helper";
+import { alert, isUserLoggedIn, timeAgo } from "@/helper";
 import { request } from "@/services/response";
 import { useState } from "react";
 
@@ -142,8 +142,15 @@ function ItemUser({ update, setUpdate, data }) {
           <Button
             className="!text-[#495057] !text-[12px] !font-medium"
             onClick={() => {
-              data.is_open_answer = !data.is_open_answer;
+              if (isUserLoggedIn()) {
-              setUpdate(!update);
+                data.is_open_answer = !data.is_open_answer;
+                setUpdate(!update);
+              } else {
+                alert(
+                  "warning",
+                  "برای ارسال کامنت باید ابتدا وارد حساب کاربری شوید."
+                );
+              }
             }}
             variant="text"
           >

app/component/comment/SendAnswer.js

@@ -2,6 +2,7 @@ import { Button } from "@mui/material";
 import Field from "./Field";
 import { useState } from "react";
 import { request } from "@/services/response";
+import { alert } from "@/helper";
 
 function SendAnswer({ data }) {
   const [comment, setComment] = useState("");
@@ -24,9 +25,14 @@ function SendAnswer({ data }) {
     request
       .postDoctorComment(body)
       .then(() => {
+        alert(
+          "success",
+          "کامنت شما با موفقیت ثبت شد و پس از تأیید نمایش داده می‌شود."
+        );
         resetData();
       })
       .catch(() => {
+        alert("error", "خطایی رخ داد! لطفاً دوباره تلاش کنید.");
         resetData();
       });
   };
@@ -45,8 +51,8 @@ function SendAnswer({ data }) {
       />
       <Button
         loading={loading}
-        variant="contained"
         onClick={sendReq}
+        variant="contained"
         className="!p-2 !h-10 !text-[12px] !font-medium sm:!py-[10px] md:!px-[12px] !rounded-[8px]
         !shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
       >

components/doctor/appointmentList/ItemAppointment.js

@@ -41,7 +41,7 @@ function ItemAppointment({ turn, loading }) {
           <GreenCalendarTurn />
           <TextLoading width={100} height={15} loading={loading}>
             <p className="text-[#05BA58] text-[12px] font-medium">
-              {Number(turn?.active)
+              {Number(turn?.free_turn)
                 ? `اولین نوبت آزاد: ${moment(turn?.free_turn * 1000).format(
                     "dddd jD jMMMM [ساعت] HH:mm"
                   )}`

components/doctor/appointmentList/index.js

@@ -5,16 +5,12 @@ import ItemAppointment from "./ItemAppointment";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import Link from "next/link";
 
-function AppointmentList({ doctors, loading }) {
+function AppointmentList({ doctor, 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 && doctors.length && (
+        {doctor && (
-          <ItemAppointment
+          <ItemAppointment loading={loading} turn={doctor} key={doctor.id} />
-            loading={loading}
-            turn={doctors[0]}
-            key={doctors[0].id}
-          />
         )}
       </ul>
       <div
@@ -22,9 +18,9 @@ function AppointmentList({ doctors, loading }) {
             border-solid bottom-0 right-0 w-full p-4 flex items-center justify-between"
       >
         <p className="text-[#05BA58] text-[11px] font-normal">
-          اولین نوبت آزاد: {doctors && doctors[0]?.free_turn}
+          اولین نوبت آزاد: {doctor && doctor?.free_turn}
         </p>
-        <Link href={`/appointment/${doctors && doctors[0]?.id}`}>
+        <Link href={`/appointment/${doctor && doctor?.id}`}>
           <Button
             variant="contained"
             className="!py-2 !px-4 gap-1 !text-[14px] !font-medium"

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -53,7 +53,7 @@ function Chart({ comments, doctor }) {
       </div>
       <div className="flex flex-wrap items-center justify-center gap-[50px]">
         <ul className="flex w-full flex-col items-start justify-start gap-1.5 lg:w-fit">
-          {doctor?.progress_detail?.map((item, idx) => (
+          {Object.values(doctor?.average_rate?.averages).map((item, idx) => (
             <TextLoading width="full" key={idx} height={20}>
               <ProgressDetail data={item} />
             </TextLoading>

components/doctor/detailDoctor/cards/comments/modal/BtnNewComment.js

@@ -0,0 +1,26 @@
+import { alert, isUserLoggedIn } from "@/helper";
+import { Button } from "@mui/material";
+import React from "react";
+
+function BtnNewComment({ handleOpen }) {
+  const handleClick = () => {
+    if (isUserLoggedIn()) {
+      handleOpen();
+    } else {
+      alert("warning", "برای ارسال کامنت باید ابتدا وارد حساب کاربری شوید.");
+    }
+  };
+
+  return (
+    <Button
+      variant="outlined"
+      onClick={handleClick}
+      className="!py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px] 
+                lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit"
+    >
+      ثبت نظر
+    </Button>
+  );
+}
+
+export default BtnNewComment;

components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js

@@ -2,14 +2,14 @@
 
 import { useState } from "react";
 import { styleDefault } from "@/mui";
-import { Box, Button, Modal, Rating, Slider } from "@mui/material";
+import { Box, Button, Modal, Rating } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
 import Field from "@/app/component/fields/Field";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import ProgressChange from "@/app/component/ProgressChange";
 import ProgressDetail from "@/data/progress_detail.json";
-import Link from "next/link";
 import { request } from "@/services/response";
+import BtnNewComment from "./BtnNewComment";
 
 function ModalAnswer({ doctor }) {
   const [open, setOpen] = useState(false);
@@ -81,14 +81,7 @@ function ModalAnswer({ doctor }) {
 
   return (
     <>
-      <Button
+      <BtnNewComment handleOpen={handleOpen} />
-        variant="outlined"
-        onClick={handleOpen}
-        className="!py-[6px] md:!py-2 lg:!py-[9px] !px-[16px] sm:!px-[23px] md:!px-[29px] 
-                lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit"
-      >
-        ثبت نظر
-      </Button>
       <Modal open={open} onClose={handleClose}>
         <Box
           sx={styleDefault}

components/doctor/index.js

@@ -24,7 +24,7 @@ function DoctorPage({ doctor, doctors, comments }) {
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">
         <DetailDoctor doctor={doctor} comments={comments} />
-        <AppointmentList doctors={doctors} />
+        <AppointmentList doctor={doctor} />
       </div>
     </div>
   );

components/doctors/head/index.js

@@ -27,16 +27,22 @@ function Head({ matchedCity, matchedState, setDoctors }) {
     searchParams.get("city") ||
     (matchedCity?.name && matchedCity?.id !== "63" ? matchedCity?.name : false);
 
+  const valCategory = isParent
+    ? findItem("id", isParent)
+    : findItem("name", fieldName);
+  const valSpecialty = isParent && findItem("name", fieldName);
+
   const defaultFilter = {
     state: selectedState && states.find((item) => item.name === selectedState),
     city: selectedCity && cities.find((item) => item.name === selectedCity),
-    category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
+    category: valCategory,
-    specialty: isParent && findItem("name", fieldName),
+    specialty: valSpecialty,
     active: searchParams.get("active") || 0,
     gender: searchParams.get("gender") || "هر دو",
     degree: searchParams.get("degree") || "همه موارد",
     sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
-    name: searchParams.get("name") || "",
+    name:
+      searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
   };
 
   const [filter, setFilter] = useState(defaultFilter);
@@ -55,11 +61,12 @@ function Head({ matchedCity, matchedState, setDoctors }) {
     isReq && sendReq(newFilter);
   };
   const sendReq = (newFilter) => {
-    const params = QueryForDoctorsReq(newFilter || filter);
+    const data = newFilter || filter;
+    const params = QueryForDoctorsReq(data);
     let filteredName = params;
     if (
-      newFilter.name === newFilter.specialty?.name ||
+      data?.name === data.specialty?.name ||
-      newFilter.name === newFilter.category?.name
+      data?.name === data.category?.name
     ) {
       filteredName.name = "";
       delete filteredName.name;

components/doctors/search/AutoComplete.js

@@ -1,42 +1,76 @@
 import { Autocomplete, TextField } from "@mui/material";
+import { useRef, useState, useEffect } from "react";
 
 function AutoComplete({
   data,
   noneBg,
   clearText,
-  inputValue,
+  inputValue, // مقدار کنترل‌شده از والد (اختیاری)
   placeholder,
-  handleSearch,
+  handleSearch, // تابعی که باید با مقدار جستجو صدا زده بشه
-  setInputValue,
+  setInputValue, // اختیاری: اگه والد دوست داره همون‌وقت مقدار رو بگیره
   setSelectedOption,
+  debounce = 500, // قابل تنظیم
 }) {
-  const clearIndicatorProps = clearText
+  const typingTimeoutRef = useRef(null);
-    ? {
+  const [localInput, setLocalInput] = useState(inputValue || "");
-        clearIndicator: {
+
-          onClick: () => {
+  // همگام‌سازی وقتی والد مقدار کنترل‌شده رو تغییر میده (مثلاً بعد از انتخاب گزینه)
-            clearText();
+  useEffect(() => {
-          },
+    setLocalInput(inputValue || "");
-        },
+  }, [inputValue]);
-      }
+
-    : {};
+  // پاک‌کردن تایمر هنگام unmount
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    };
+  }, []);
+
+  const onInputChange = (_, newInputValue) => {
+    // نمایش آنی تایپ کاربر
+    setLocalInput(newInputValue);
+
+    // اختیاری: اگر والد خواست همون‌جا مقدار رو بگیره
+    if (setInputValue) setInputValue(newInputValue);
+
+    // پاک کردن تایمر قبلی و ست کردن تایمر جدید برای debounce
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    typingTimeoutRef.current = setTimeout(() => {
+      handleSearch(newInputValue);
+    }, debounce);
+  };
+
+  const onChange = (_, newValue) => {
+    // انتخاب از لیست — مقدار رو فوراً پردازش کن
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = null;
+    }
+
+    const val = newValue
+      ? typeof newValue === "string"
+        ? newValue
+        : newValue.name
+      : "";
+    setLocalInput(val);
+    setSelectedOption && setSelectedOption(newValue);
+    handleSearch(val); // اجرای فوری روی انتخاب
+    if (setInputValue) setInputValue(val);
+  };
 
   return (
     <Autocomplete
       freeSolo
       options={data}
-      getOptionLabel={(option) => option.name}
+      getOptionLabel={(option) =>
+        typeof option === "string" ? option : option.name
+      }
       disableClearable
-      inputValue={inputValue || ""}
+      inputValue={localInput} // ← نمایش آنی از local state
       className="!w-full"
-      onInputChange={(_, newInputValue) => {
+      onInputChange={onInputChange}
-        setInputValue && setInputValue(newInputValue);
+      onChange={onChange}
-        handleSearch(newInputValue);
-      }}
-      onChange={(_, newValue) => {
-        setSelectedOption && setSelectedOption(newValue);
-        handleSearch(newValue ? newValue.name : "");
-      }}
-      // componentsProps={clearIndicatorProps}
       renderOption={(props, option) => (
         <li {...props} key={option.id}>
           {option.name}

components/panel/addDoctor/form/sendReq/index.js

@@ -2,9 +2,8 @@ import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
 import { alert, checkAllValues } from "@/helper";
 import { request } from "@/services/response";
 import { Button } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { transformData } from "./function";
-import { toast, ToastContainer } from "react-toastify";
 
 function SendReq({ img, data, resetData }) {
   const [loading, setLoading] = useState(false);

helper/index.js

@@ -460,3 +460,8 @@ export function timeAgo(timestamp) {
     return `${years} سال پیش`;
   }
 }
+
+export function isUserLoggedIn() {
+  const userInfo = Cookies.get("userInfo");
+  return !!userInfo;
+}