change design and data list in doctor-item & handle component appointment in doctor-item & handle functionality date-picker & fix bug appointment page & add req get appointment list

components/appointment/date/PlaceVisit.js

@@ -0,0 +1,29 @@
+"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/SelectDatePicker.js

@@ -0,0 +1,20 @@
+import DatePicker from "@/app/component/date/datePicker";
+import { request } from "@/services/response";
+import { useEffect } from "react";
+
+function SelectDatePicker() {
+  useEffect(() => {
+    request
+      .getAppointment(47, 1753859133)
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  });
+
+  return <DatePicker />;
+}
+
+export default SelectDatePicker;

components/appointment/date/Time/index.js

@@ -0,0 +1,17 @@
+import SelectDatePicker from "./SelectDatePicker";
+
+function Time({ isStep }) {
+  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. انتخاب روز
+      </p>
+      <SelectDatePicker />
+      {!isStep && (
+        <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
+      )}
+    </div>
+  );
+}
+
+export default Time;

components/appointment/date/hour/index.js

@@ -0,0 +1,22 @@
+import DateTime from "@/app/component/date/dateTime";
+
+function Hour({ doctor, setStep, setIsError, 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. انتخاب ساعت
+      </p>
+      <DateTime
+        doctor={doctor}
+        setStep={setStep}
+        setIsError={setIsError}
+        locateVisit={locateVisit}
+      />
+      {!isStep && (
+        <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
+      )}
+    </div>
+  );
+}
+
+export default Hour;

components/appointment/date/index.js

@@ -0,0 +1,38 @@
+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);
+  const [isError, setIsError] = useState(false);
+
+  return (
+    <div className="w-full lg:w-[61%]">
+      <div
+        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
+          isStep={doctor?.multiwork ? locateVisit : true}
+          locateVisit={locateVisit}
+        />
+        <Hour
+          isStep={doctor?.multiwork ? locateVisit : true}
+          setLocateVisit={setLocateVisit}
+          locateVisit={locateVisit}
+          setIsError={setIsError}
+          setStep={setStep}
+          doctor={doctor}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Date;