modal add card in page bank-account

app/component/EditField.js

@@ -11,6 +11,7 @@ function EditField({
   name,
   iconGray,
   isTransparent,
+  noDisable,
 }) {
   return (
     <div className="relative w-full">
@@ -18,7 +19,7 @@ function EditField({
         value={data?.value}
         rows={multiline}
         multiline={multiline}
-        disabled={!data?.isEdit}
+        disabled={noDisable ? false : !data?.isEdit}
         placeholder={placeholder || ""}
         type="text"
         className={`!w-full res-field-account dark:!bg-transparent ${

components/panel/addDoctor/listMenu/generalInformation/form/FieldDate.js

@@ -4,7 +4,7 @@ import { convertToJalali } from "@/helper";
 import EditField from "@/app/component/EditField";
 import ButtonDate from "@/app/component/ButtonDate";
 import CalendarPD from "@/components/icons/CalendarPD";
-import ContentText from "@/components/panel/ContentText";
+import ContentText from "@/app/component/ContentText";
 
 function FieldDate({ changeListData, data }) {
   const [anchorEl, setAnchorEl] = useState(null);

components/panel/addDoctor/listMenu/generalInformation/form/Form.js

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import ContentText from "@/components/panel/ContentText";
+import ContentText from "@/app/component/ContentText";
 import EditField from "@/app/component/EditField";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import { degree } from "./listSelector";

components/panel/addDoctor/listMenu/officeInformation/Form.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 
 import { city, state } from "./listSelector";
 import EditField from "@/app/component/EditField";
-import ContentText from "@/components/panel/ContentText";
+import ContentText from "@/app/component/ContentText";
 import AddLocationP from "@/components/icons/AddLocationP";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 

components/panel/addDoctor/listMenu/specialDays/Form.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import ContentText from "@/components/panel/ContentText";
+import ContentText from "@/app/component/ContentText";
 import { dayOfWeek, timeEachTurn, turnsPerDay } from "./listSelector";
 import { Button } from "@mui/material";
 import PlusBlueP from "@/components/icons/PlusBlueP";

components/panel/addDoctor/listMenu/turns/Form.js

@@ -1,5 +1,5 @@
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import ContentText from "@/components/panel/ContentText";
+import ContentText from "@/app/component/ContentText";
 import { numberOfTurns, timeOfEachTurn } from "./listSelector";
 import { useState } from "react";
 

components/panel/addDoctor/listMenu/workingDays/modal/Form.js

@@ -1,5 +1,5 @@
 import { Button } from "@mui/material";
-import ContentText from "@/components/panel/ContentText";
+import ContentText from "@/app/component/ContentText";
 import TimePickerField from "@/app/component/TimePickerField";
 
 function Form({ handleClose, isVacation, setData, dataChange, data, value }) {

components/panel/userAccount/account/form/index.js

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 
-import ContentText from "../../../ContentText";
+import ContentText from "../../../../../app/component/ContentText";
 import EditField from "@/app/component/EditField";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import { bank, city, state } from "./listSelector";

components/panel/userAccount/bank/head/index.js

@@ -1,4 +1,4 @@
-import ModalAddCard from "./ModalAddCard";
+import ModalAddCard from "./modal/ModalAddCard";
 
 function Head() {
   return (

components/panel/userAccount/bank/head/modal/Form.js

@@ -0,0 +1,49 @@
+import ContentText from "@/app/component/ContentText";
+import EditField from "@/app/component/EditField";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+
+const list = [
+  { label: "بانک 1", id: 10 },
+  { label: "بانک 2", id: 20 },
+  { label: "بانک 3", id: 30 },
+  { label: "بانک 4", id: 40 },
+];
+
+function Form({ data, changeData }) {
+  return (
+    <div className="mt-[40px] flex flex-col gap-[32px] px-[52px]">
+      <ContentText text="شماره کارت">
+        <EditField
+          isTransparent={true}
+          placeholder="شماره کارت خود را بنویسید..."
+          iconGray={true}
+          changeData={changeData}
+          data={data.card}
+          noDisable={true}
+          name="card"
+        />
+      </ContentText>
+      <ContentText text="شماره شبا">
+        <EditField
+          isTransparent={true}
+          placeholder="شماره شبا خود را بنویسید..."
+          iconGray={true}
+          changeData={changeData}
+          data={data.shaba}
+          noDisable={true}
+          name="card"
+        />
+      </ContentText>
+      <ContentText text="بانک">
+        <AutoCompleteSelect
+          updateData={changeData}
+          label="انتخاب بانک...."
+          name="bank"
+          list={list}
+        />
+      </ContentText>
+    </div>
+  );
+}
+
+export default Form;

components/panel/userAccount/bank/head/modal/ModalAddCard.js

@@ -4,12 +4,21 @@ import { Box, Button, Modal } from "@mui/material";
 import { styleDefault } from "@/mui";
 import CloseModalD from "@/components/icons/CloseModalD";
 import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
+import Form from "./Form";
 
 function ModalAddCard() {
   const [open, setOpen] = useState(false);
+  const [data, setData] = useState({
+    card: "",
+    shaba: "",
+    bank: "",
+  });
+
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
+  const changeData = (value, name) => setData({ ...data, [name]: value });
+
   return (
     <div>
       {/* Button Modal */}
@@ -25,7 +34,7 @@ function ModalAddCard() {
       <Modal open={open} onClose={handleClose}>
         <Box
           sx={styleDefault}
-          className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
+          className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]"
         >
           <div className="flex items-center justify-between w-full">
             <p className="text-[#3B3B3B] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
@@ -35,6 +44,7 @@ function ModalAddCard() {
               <CloseModalD />
             </Button>
           </div>
+          <Form data={data} changeData={changeData} />
           <div className="flex items-center justify-center gap-[12px] md:gap-[14px] lg:gap-[16px] mt-[32px] md:mt-[36px] lg:mt-[40px]">
             <Button
               variant="outlined"