change layout and router panel & design page dashboard and user account

app/component/EditField.js

@@ -2,12 +2,13 @@ import EditGrayA from "@/components/icons/EditGrayA"
 import EditOrangeA from "@/components/icons/EditOrangeA"
 import { Button, TextField } from "@mui/material"
 
-function EditField({ changeData, data, name, iconGray, isTransparent }) {
+function EditField({ changeData, icon, placeholder, data, name, iconGray, isTransparent }) {
     return (
         <div className="relative w-full">
             <TextField
                 value={data?.value}
                 disabled={!data?.isEdit}
+                placeholder={placeholder || ''}
                 type='text'
                 className={`!w-full res-field-account ${isTransparent ? '!bg-transparent lg:!bg-[#FFF]' : '!bg-[#FFF]'}`}
                 onChange={e => {
@@ -34,11 +35,12 @@ function EditField({ changeData, data, name, iconGray, isTransparent }) {
                     changeData(!data.isEdit, 'isEdit', name)
                 }}
             >
-                {iconGray ? (
-                    <EditGrayA />
-                ) : (
-                    <EditOrangeA />
-                )}
+                {icon ? icon :
+                    iconGray ? (
+                        <EditGrayA />
+                    ) : (
+                        <EditOrangeA />
+                    )}
             </Button>
         </div>
     )