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

app/component/date/dateTime/Hours.js

@@ -1,34 +0,0 @@
-import { Button } from "@mui/material";
-
-function Hours({ doctor, hour, setHour, value, nameHours }) {
-  return (
-    <ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
-      {doctor &&
-        nameHours &&
-        doctor[nameHours[value]]?.map((item, idx) => (
-          <li key={idx}>
-            <Button
-              onClick={() => setHour(idx)}
-              disabled={!item.active}
-              className={`
-                        !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
-                        ${idx === hour ? "!bg-[#F79463] " : ""}
-                    `}
-            >
-              <p
-                className={`
-                        text-[16px] font-semibold text-[#525252]
-                        ${item.active ? "text-[#525252]" : "text-[#D7D7D7]"}
-                        ${idx === hour ? "!text-[#FAFAFA] " : ""}
-                    `}
-              >
-                {item.hour}
-              </p>
-            </Button>
-          </li>
-        ))}
-    </ul>
-  );
-}
-
-export default Hours;

app/component/date/dateTime/SendAppo.js

@@ -0,0 +1,49 @@
+import ArrowLeftB from "@/components/icons/ArrowLeftB";
+import { request } from "@/services/response";
+import { Button } from "@mui/material";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+
+function SendAppo({ hour }) {
+  const params = useParams();
+  const doctorId = params.doctorId;
+  const [loading, setLoading] = useState(false);
+
+  const sendReq = () => {
+    setLoading(true);
+    request
+      .postAppointment({
+        doctor_id: doctorId,
+        slot: hour,
+      })
+      .then((res) => {
+        console.log(res);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+    // if (locateVisit) {
+    //   setStep((prev) => prev + 1);
+    // } else {
+    //   setIsError(true);
+    // }
+  };
+
+  return (
+    <div className="w-full flex justify-end">
+      <Button
+        className="!gap-[4px] !text-[16px] !font-medium !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
+        variant="contained"
+        loading={loading}
+        onClick={sendReq}
+        disabled={!hour}
+      >
+        تایید نوبت
+        <ArrowLeftB />
+      </Button>
+    </div>
+  );
+}
+
+export default SendAppo;

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

@@ -0,0 +1,44 @@
+import { Button } from "@mui/material";
+import React from "react";
+
+function List({ appo, hour, setHour, value }) {
+  const list = appo && appo[value ? "evening" : "morning"];
+
+  if (list && list.length) {
+    return (
+      <ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
+        {list.map((item, idx) => (
+          <li key={idx}>
+            <Button
+              onClick={() => setHour(item)}
+              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] " : ""}
+                      `}
+            >
+              <p
+                className={`
+                          text-[16px] font-semibold text-[#525252]
+                          ${item.status === "available" ? "text-[#525252]" : "text-[#D7D7D7]"}
+                          ${JSON.stringify(item) === JSON.stringify(hour) ? "!text-[#FAFAFA] " : ""}
+                      `}
+              >
+                {item.time}
+              </p>
+            </Button>
+          </li>
+        ))}
+      </ul>
+    );
+  } else {
+    return (
+      <p className="text-[#525252] text-[14px] md:text-[16px] font-medium py-[56px]">
+        در حال حاضر، نوبتی برای ساعت‌های {[value ? "بعد از ظهر" : "صبح"]} موجود
+        نمی‌باشد.
+      </p>
+    );
+  }
+}
+
+export default List;

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

@@ -0,0 +1,23 @@
+import { CircularProgress } from "@mui/material";
+
+function Loading() {
+  return (
+    <div className="w-full grid place-items-center py-[48px]">
+      <CircularProgress
+        sx={{
+          "& .MuiCircularProgress-circle": {
+            stroke: "#F17732",
+            // strokeLinecap: "round",
+          },
+          "& .MuiCircularProgress-svg": {
+            // borderRadius: "50%",
+            // boxShadow: "inset 0 0 0 11px #D7D7D7",
+          },
+        }}
+        className="!mx-auto"
+      />
+    </div>
+  );
+}
+
+export default Loading;

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

@@ -0,0 +1,18 @@
+import List from "./List";
+import Loading from "./Loading";
+
+function Hours({ appo, doctor, hour, setHour, value, nameHours }) {
+  if (appo === "loading") {
+    return <Loading />;
+  } else if (typeof appo === "string") {
+    return (
+      <p className="text-[#525252] text-[14px] md:text-[16px] font-medium py-[56px]">
+        {appo}
+      </p>
+    );
+  } else {
+    return <List appo={appo} hour={hour} value={value} setHour={setHour} />;
+  }
+}
+
+export default Hours;

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>
   );
 }