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/failedPay/index.js

@@ -0,0 +1,50 @@
+import Link from "next/link";
+import { Button } from "@mui/material";
+import RedoA from "@/components/icons/RedoA";
+import RefreshA from "@/components/icons/RefreshA";
+import InfoCircleRedA from "@/components/icons/InfoCircleRedA";
+
+function FailedPay({ setStep, fadeElement }) {
+  return (
+    <div className="w-full lg:w-[59%]">
+      <div
+        className={`opacity-page bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF] 
+                rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
+      >
+        <div className="mt-[7px]">
+          <div className="flex flex-col justify-center items-center gap-[14px]">
+            <InfoCircleRedA />
+            <p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
+              پرداخت شما انجام نشد.
+            </p>
+          </div>
+          <div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
+            <Link href="/">
+              <Button
+                variant="outlined"
+                className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
+              >
+                <RedoA />
+                <p className="text-[#5559CE] text-[16px] font-medium">
+                  صفحه اصلی
+                </p>
+              </Button>
+            </Link>
+            <Button
+              variant="contained"
+              onClick={() => setStep((prev) => prev - 2)}
+              className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
+            >
+              <RefreshA />
+              <p className="text-[#FAFAFA] text-[16px] font-medium">
+                تلاش دوباره
+              </p>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FailedPay;