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

app/component/date/datePicker/index.js

@@ -1,20 +1,20 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
-import { Skeleton } from "@mui/material";
-import NextIconDatePicker from "./NextIconDatePicker";
-import PrevIconDatePicker from "./PrevIconDatePicker";
+import FirstDatePicker from "./date/FirstDatePicker";
+import SecondDatePicker from "./date/SecondDatePicker";
 
 function DatePicker({ date, updateDate }) {
-  const nextIconDatePicker = useRef();
-  const prevIconDatePicker = useRef();
+  const nextIconDatePickerF = useRef();
+  const prevIconDatePickerF = useRef();
+  const nextIconDatePickerS = useRef();
+  const prevIconDatePickerS = useRef();
 
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState();
   const [loading, setLoading] = useState(true);
 
-  const handleStartDateChange = (date) => {
+  const handleStartDateChange = (date, e) => {
     if (date) {
       setStartDate(date);
       setEndDate(null);
@@ -34,64 +34,34 @@ function DatePicker({ date, updateDate }) {
   };
 
   useEffect(() => {
-    if (nextIconDatePicker.current) {
-      nextIconDatePicker.current.click();
+    if (nextIconDatePickerS.current) {
+      nextIconDatePickerS.current.click();
+      console.log(nextIconDatePickerS.current);
+
       setLoading(false);
     }
-  }, [nextIconDatePicker]);
+  }, [nextIconDatePickerS]);
 
   return (
-    <div className="flex items-start custom-datepicker justify-evenly w-full">
-      <div className="w-full md:w-1/2 lg:w-full xl:w-1/2 relative flex justify-center">
-        <DatePickerJalali
-          value={startDate}
-          className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
-          timePicker={false}
-          nextIcon={
-            <div className="flex md:hidden lg:flex xl:hidden">
-              <NextIconDatePicker nextIconDatePicker={nextIconDatePicker} />
-            </div>
-          }
-          prevIcon={
-            <PrevIconDatePicker prevIconDatePicker={prevIconDatePicker} />
-          }
-          onChange={handleStartDateChange}
-          disabledDates={(e) => handleDisableDate(e)}
-        />
-        {loading && (
-          <Skeleton
-            variant="rectangular"
-            className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
-            height={352}
-          />
-        )}
-      </div>
-      <div className="w-1/2 hidden md:flex lg:hidden xl:flex">
-        <div className="w-full relative flex justify-center">
-          <DatePickerJalali
-            value={endDate}
-            timePicker={false}
-            className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
-            nextIcon={
-              <NextIconDatePicker nextIconDatePicker={nextIconDatePicker} />
-            }
-            prevIcon={
-              <div className="flex md:hidden lg:flex xl:hidden">
-                <PrevIconDatePicker prevIconDatePicker={prevIconDatePicker} />
-              </div>
-            }
-            onChange={handleEndDateChange}
-            disabledDates={(e) => handleDisableDate(e)}
-          />
-          {loading && (
-            <Skeleton
-              variant="rectangular"
-              className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
-              height={352}
-            />
-          )}
-        </div>
-      </div>
+    <div className="datePickerApt flex items-start custom-datepicker justify-evenly w-full">
+      <FirstDatePicker
+        loading={loading}
+        startDate={startDate}
+        handleDisableDate={handleDisableDate}
+        nextIconDatePickerF={nextIconDatePickerF}
+        prevIconDatePickerF={prevIconDatePickerF}
+        prevIconDatePickerS={prevIconDatePickerS}
+        handleStartDateChange={handleStartDateChange}
+      />
+      <SecondDatePicker
+        loading={loading}
+        endDate={endDate}
+        handleDisableDate={handleDisableDate}
+        nextIconDatePickerF={nextIconDatePickerF}
+        nextIconDatePickerS={nextIconDatePickerS}
+        prevIconDatePickerS={prevIconDatePickerS}
+        handleEndDateChange={handleEndDateChange}
+      />
     </div>
   );
 }