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",

app/component/element/AutoSelector.js

@@ -0,0 +1,96 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function AutoSelector({
+  list,
+  value,
+  isError,
+  updateData,
+  label,
+  disabled = false,
+  listboxProps,
+  name,
+}) {
+  return (
+    <Autocomplete
+      disablePortal
+      options={list}
+      disabled={disabled}
+      defaultValue={value}
+      ListboxProps={listboxProps}
+      getOptionLabel={(option) => {
+        if (typeof option === "string") return option;
+        return option?.name || option?.label || "";
+      }}
+      className="!w-full !rounded-lg auto-complete-selector"
+      onChange={(e, newValue) => updateData(name, newValue?.label || "")}
+      sx={{
+        ...styleTextSelectRight,
+        // Hide Icon Number
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+          {
+            display: "none",
+          },
+        "& input[type=number]": {
+          MozAppearance: "textfield",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+        "& .MuiInputBase-root": {
+          borderRadius: 2,
+          padding: "0 !important",
+          height: {
+            xs: "43px !important",
+            sm: "43px !important",
+            md: "46px !important",
+            lg: "48px !important",
+          },
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #D7D7D7",
+        },
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: "#D7D7D7 !important",
+          },
+        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+          {
+            border: "1px solid #5559CE !important",
+          },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: isError ? "1px solid red !important" : "",
+        },
+      }}
+      renderOption={(props, option) => (
+        <Button
+          fullWidth
+          {...props}
+          key={option.id || props.id}
+          className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+        >
+          {option.name || option.label}
+        </Button>
+      )}
+      renderInput={(params) => (
+        <TextField
+          fullWidth
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <div className="absolute left-4">
+                <BottomSelect />
+              </div>
+            ),
+          }}
+          placeholder={label}
+          sx={{
+            borderRadius: "8px",
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default AutoSelector;