update modals & text & design

app/component/element/Field.js

@@ -1,25 +1,22 @@
 import { TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function Field({
-  title,
-  type,
-  dir,
-  // isPlaceHolder
-}) {
+function Field({ title, type, dir, value, updateState }) {
   return (
     <TextField
       label={title}
       dir={dir || "rtl"}
       type={type || "text"}
+      value={value}
+      onChange={(e) => updateState(e.target.value)}
       className="!w-full !mx-auto !bg-[#FFF]"
       sx={{
         ...styleTextSelectRight,
         // Hide Icon Number
         "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-          {
-            display: "none",
-          },
+        {
+          display: "none",
+        },
         "& input[type=number]": {
           MozAppearance: "textfield",
         },