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

2025-07-09 03:05:48 +03:30
parent f951128074
commit c6e2657e45
57 changed files with 442 additions and 445 deletions
@@ -0,0 +1,17 @@
+function Content({ isConfirmed, children, title }) {
+  return (
+    <div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
+      <div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">
+        <p className="text-[#525252] text-[14px] font-medium">{title}</p>
+        {isConfirmed && (
+          <p className="py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal">
+            تایید شده
+          </p>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default Content;
@@ -0,0 +1,42 @@
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import EditField from "../../../app/component/EditField";
+import Content from "./Content";
+
+const bime = [
+  { label: "بیمه 1", id: 10 },
+  { label: "بیمه 2", id: 20 },
+  { label: "بیمه 3", id: 30 },
+];
+
+function Form({ changeData, data, updateSelect, isForAnother }) {
+  return (
+    <div
+      className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start 
+        justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
+    >
+      <Content title="شماره موبایل" isConfirmed={isForAnother ? false : true}>
+        <EditField changeData={changeData} data={data?.phone} name="phone" />
+      </Content>
+      <Content title="کد ملی">
+        <EditField
+          changeData={changeData}
+          data={data?.codemeli}
+          name="codemeli"
+        />
+      </Content>
+      <Content title="نام و نام خانوادگی">
+        <EditField changeData={changeData} data={data?.name} name="name" />
+      </Content>
+      <Content title="نوع بیمه">
+        <AutoCompleteSelect
+          updateData={updateSelect}
+          label="نوع بیمه"
+          name="first"
+          list={bime}
+        />
+      </Content>
+    </div>
+  );
+}
+
+export default Form;
@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { Button } from "@mui/material";
+import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
+import ArrowLeftB from "@/components/icons/ArrowLeftB";
+import ButtonFixed from "../paying/ButtonFixed";
+import Form from "./Form";
+
+function Detail({
+  isForAnother,
+  setStep,
+  setIsForAnother,
+  data,
+  setData,
+  fadeElement,
+  setIsPay,
+}) {
+  const [selected, setSelected] = useState({
+    first: "",
+    second: "",
+  });
+
+  const changeData = (value, type, name) =>
+    setData({
+      ...data,
+      [name]: {
+        ...data[name],
+        [type]: value,
+      },
+    });
+
+  const updateSelect = (event, name) =>
+    setSelected({ ...selected, [name]: event });
+
+  return (
+    // ${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}
+    <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-[20px] font-bold">
+          {isForAnother ? "اطلاعات کاربر جدید" : "اطلاعات حساب کاربری"}
+        </p>
+        <Form
+          isForAnother={isForAnother}
+          updateSelect={updateSelect}
+          changeData={changeData}
+          data={data}
+        />
+        {!isForAnother && (
+          <Button
+            className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
+            onClick={() => {
+              setIsForAnother(true);
+              setData({
+                phone: { value: "09121056987", isEdit: true },
+                codemeli: { value: "1741025645", isEdit: true },
+                name: { value: "ساغر صابری نژاد", isEdit: true },
+              });
+            }}
+          >
+            <AddCircleBlueA />
+            <p className="text-[#5559CE] text-[16px] font-medium">
+              دریافت نوبت برای فرد دیگر{" "}
+            </p>
+          </Button>
+        )}
+        <ButtonFixed>
+          <Button
+            className={`
+                    !flex !w-full md:!w-fit
+                    !gap-[4px] md:!mr-auto !px-[12px] !py-[8px] md:!py-[9px] !min-w-[150px]
+                    ${
+                      isForAnother
+                        ? "!mt-0 md:!mt-[40px]"
+                        : "!mt-0 md:!mt-[32px]"
+                    }`}
+            variant="contained"
+            onClick={() => setStep((prev) => prev + 1)}
+          >
+            <p className="text-[#EFEFEF] text-[16px] font-medium">
+              ثبت اطلاعات
+            </p>
+            <ArrowLeftB />
+          </Button>
+        </ButtonFixed>
+      </div>
+    </div>
+  );
+}
+
+export default Detail;