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/paying/ButtonFixed.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+function ButtonFixed({ children }) {
+  return (
+    <div
+      className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t 
+        md:border-t-transparent border-[#D7D7D7] z-10
+        !w-full sm:!w-full !p-[16px] sm:!px-[52px] md:!ml-0 md:!p-0 md:!w-full"
+    >
+      {children}
+    </div>
+  );
+}
+
+export default ButtonFixed;

components/appointment/paying/index.js

@@ -0,0 +1,46 @@
+import ArrowLeftB from "@/components/icons/ArrowLeftB";
+import { Button } from "@mui/material";
+import ButtonFixed from "./ButtonFixed";
+
+function Paying({ setTypePay, fadeElement, setStep }) {
+  return (
+    <div className="w-full lg:w-[59%]">
+      <div
+        className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
+                rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
+      >
+        <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
+          اطلاعات پرداخت
+        </p>
+        <div className="flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]">
+          <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
+            مبلغ پیش پرداخت (بیعانه) :{" "}
+          </p>
+          <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
+            20،000 تومان
+          </p>
+        </div>
+        <span className="bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]"></span>
+        <ButtonFixed>
+          <div className="flex items-center justify-between gap-2">
+            <p className="text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
+              مبلغ قابل پرداخت : 20،000 تومان
+            </p>
+            <Button
+              className="!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]"
+              onClick={() => setStep((prev) => prev + 1)}
+              variant="contained"
+            >
+              <p className="text-[#EFEFEF] text-[16px] font-medium">
+                پرداخت نهایی
+              </p>
+              <ArrowLeftB />
+            </Button>
+          </div>
+        </ButtonFixed>
+      </div>
+    </div>
+  );
+}
+
+export default Paying;