change packages & change data in weekly day & add fields to modal add & remove validation from login page

app/component/date/dateTime/index.js

@@ -1,19 +1,46 @@
 "use client";
 
-import { useState } from "react";
-import Hours from "./Hours";
+import { useEffect, useState } from "react";
+import Hours from "./hours";
 import Tabs from "../../Tabs";
 import { Button } from "@mui/material";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";
+import { request } from "@/services/response";
+import { useParams, useSearchParams } from "next/navigation";
+import SendAppo from "./SendAppo";
 
 const listTab = ["صبح", "بعد از ظهر"];
 const nameHours = ["hours_morning", "hours_afternoon"];
 
-function DateTime({ doctor, setStep, setIsError, locateVisit }) {
+function DateTime({ date, doctor, setStep, setIsError, locateVisit }) {
+  const params = useParams();
+  const doctorId = params.doctorId;
   const [value, setValue] = useState(0);
-  const [hour, setHour] = useState(0);
+  const [hour, setHour] = useState();
+  const [appo, setAppo] = useState("تاریخ مورد نظرتان را انتخاب کنید.");
 
-  const handleChange = (event, newValue) => setValue(newValue);
+  const handleChange = (event, newValue) => {
+    setHour();
+    setValue(newValue);
+  };
+  console.log(hour);
+
+  useEffect(() => {
+    if (date) {
+      setAppo("loading");
+      setHour();
+      request
+        .getAppointment(doctorId, date)
+        .then((res) => {
+          console.log(res);
+          setAppo(res);
+        })
+        .catch((err) => {
+          console.log(err);
+          setAppo("در حال حاضر، نوبتی برای ساعت‌های صبح موجود نمی‌باشد.");
+        });
+    }
+  }, [date]);
 
   return (
     <div className="w-full">
@@ -41,29 +68,14 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
         handleChange={handleChange}
       />
       <Hours
+        appo={appo}
         hour={hour}
         value={value}
         doctor={doctor}
         setHour={setHour}
         nameHours={nameHours}
       />
-      <div className="w-full flex justify-end">
-        <Button
-          className="!gap-[4px] !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
-          onClick={() => {
-            if (locateVisit) {
-              localStorage.setItem("doctor-id", doctor?.id);
-              setStep((prev) => prev + 1);
-            } else {
-              setIsError(true);
-            }
-          }}
-          variant="contained"
-        >
-          <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
-          <ArrowLeftB />
-        </Button>
-      </div>
+      <SendAppo hour={hour} />
     </div>
   );
 }