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

app/component/Field.js

@@ -1,16 +1,29 @@
 import { TextField } from "@mui/material";
 
-function Field({ title, type, props, multiline, isPlaceHolder }) {
+function Field({
+  type,
+  name,
+  title,
+  props,
+  value,
+  multiline,
+  handleChange,
+  isPlaceHolder,
+}) {
   return (
     <TextField
       {...props}
       size="small"
-      placeholder={isPlaceHolder && title}
-      label={!isPlaceHolder ? title : ""}
+      defaultValue={value}
       type={type || "text"}
       multiline={!!multiline}
       rows={!!multiline ? 4 : 1}
+      label={!isPlaceHolder ? title : ""}
+      placeholder={isPlaceHolder && title}
       className="!w-full !mx-auto !bg-[#FFF]"
+      onChange={(e) => {
+        handleChange(name || "", e.target.value);
+      }}
       sx={{
         "& .MuiFormLabel-root": {
           top: "-4px !important",