change design footer & home & fields

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

@@ -1,6 +1,7 @@
-import ContentText from "@/app/component/ContentText";
 import EditField from "@/app/component/EditField";
+import ContentText from "@/app/component/ContentText";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import { validate_phone_number } from "./validate";
 
 const list = [
   { label: "بانک 1", id: 10 },
@@ -9,29 +10,37 @@ const list = [
   { label: "بانک 4", id: 40 },
 ];
 
-function Form({ data, changeData }) {
+function Form({ data, changeData, updateNum }) {
   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]">
       <ContentText text="شماره کارت">
         <EditField
           isTransparent={true}
-          placeholder="شماره کارت خود را بنویسید..."
           iconGray={true}
-          changeData={changeData}
+          changeData={updateNum}
           data={data.card}
           noDisable={true}
+          type="number"
+          placeholder="شماره کارت خود را بنویسید..."
           name="card"
+          props={{
+            inputProps: validate_phone_number,
+          }}
         />
       </ContentText>
       <ContentText text="شماره شبا">
         <EditField
           isTransparent={true}
-          placeholder="شماره شبا خود را بنویسید..."
           iconGray={true}
-          changeData={changeData}
+          changeData={updateNum}
           data={data.shaba}
           noDisable={true}
-          name="card"
+          type="number"
+          placeholder="شماره شبا خود را بنویسید..."
+          name="shaba"
+          props={{
+            inputProps: validate_phone_number,
+          }}
         />
       </ContentText>
       <ContentText text="بانک">

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

@@ -1,22 +1,35 @@
 import { useState } from "react";
-import { Box, Button, Modal } from "@mui/material";
-import { styleDefault } from "@/mui";
-import CloseModalD from "@/components/icons/CloseModalD";
 import Form from "./Form";
+import { styleDefault } from "@/mui";
+import { Box, Button, Modal } from "@mui/material";
+import { validate_phone_number } from "./validate";
+
+// Icons
 import PlusB from "@/components/icons/PlusB";
+import CloseModalD from "@/components/icons/CloseModalD";
 
 function ModalAddCard() {
   const [open, setOpen] = useState(false);
   const [data, setData] = useState({
-    card: "",
-    shaba: "",
-    bank: "",
+    card: { value: "", is_edit: true },
+    shaba: { value: "", is_edit: true },
+    bank: { value: "", is_edit: true },
   });
 
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
-  const changeData = (value, name) => setData({ ...data, [name]: value });
+  const changeData = (value, name) =>
+    setData({ ...data, [name]: { ...data[name], value } });
+
+  const updateNum = (value, type, name) => {
+    const parseValue = +value;
+    const { max } = validate_phone_number;
+
+    const validateValue = parseValue > max ? data[name].value : value;
+
+    changeData(validateValue, name);
+  };
 
   return (
     <>
@@ -43,7 +56,7 @@ function ModalAddCard() {
               <CloseModalD />
             </Button>
           </div>
-          <Form data={data} changeData={changeData} />
+          <Form data={data} changeData={changeData} updateNum={updateNum} />
           <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"

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

@@ -0,0 +1,6 @@
+const validate_phone_number = {
+  min: 1,
+  max: 9999999999,
+};
+
+export { validate_phone_number };