change design footer & home & fields

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"