design and handle modal add, edit and delete in all tabs dashboard & change list & update data profile_other

components/dashboard/userAccount/tabs/surgeries/modal/Content.js

@@ -0,0 +1,50 @@
+import FieldLabel from "@/components/contactUs/FieldLabel";
+import Field from "@/app/component/Field";
+
+const listIntensity = [
+  { label: "شدید" },
+  { label: "متوسط" },
+  { label: "خفیف" },
+];
+
+function Content({ setData, data }) {
+  const handleChange = (name, value) =>
+    setData((prev) => ({ ...prev, [name]: value }));
+
+  return (
+    <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
+      <FieldLabel title="نوع جراحی">
+        <Field
+          title=""
+          type="text"
+          name="type"
+          isPlaceHolder={true}
+          value={data?.type}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="نام بیمارستان">
+        <Field
+          title=""
+          type="text"
+          name="hospital"
+          isPlaceHolder={true}
+          value={data?.hospital}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+      <FieldLabel title="سال انجام جراحی">
+        <Field
+          title=""
+          type="number"
+          name="year"
+          isPlaceHolder={true}
+          value={data?.year}
+          handleChange={handleChange}
+        />
+      </FieldLabel>
+    </div>
+  );
+}
+
+export default Content;

components/dashboard/userAccount/tabs/surgeries/modal/index.js

@@ -2,10 +2,24 @@ import { styleDefault } from "@/mui";
 import AddBtn from "../../../components/AddBtn";
 import UpdateBtn from "../../../components/UpdateBtn";
 import { Button, Modal } from "@mui/material";
+import Content from "./Content";
+import { useState } from "react";
+
+function ModalAddSurgeries({ open, setOpen, changeData }) {
+  const contentItem = {
+    type: "",
+    year: "",
+    hospital: "",
+  };
 
-function ModalAddSurgeries({ open, setOpen }) {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
+  const [newItem, setNewItem] = useState(contentItem);
+  const handleAddData = () => {
+    changeData("add", "surgeries", null, newItem);
+    setNewItem(contentItem);
+    handleClose();
+  };
 
   return (
     <>
@@ -24,16 +38,19 @@ function ModalAddSurgeries({ open, setOpen }) {
         >
           <div>
             <div className="flex justify-between w-full">
-              <p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن جراحی</p>
+              <p className="text-[#3B3B3B] text-[20px] font-bold">
+                اضافه کردن جراحی
+              </p>
             </div>
-            {/* <Content /> */}
+            <Content setData={setNewItem} />
           </div>
           <Button
             className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
-            onClick={handleClose}
+            onClick={handleAddData}
+            disabled={!newItem.type || !newItem.year || !newItem.hospital}
             variant="contained"
           >
-            اعمال تغییرات
+            اضافه کردن
           </Button>
         </div>
       </Modal>