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>
     )

app/component/Pagination.js

@@ -14,6 +14,9 @@ function Pagination() {
                 },
                 '& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': {
                     color: '#F8F8FF'
+                },
+                '& .MuiSvgIcon-root': {
+                    rotate: '180deg !important'
                 }
             }}
         />

app/component/comment/ItemUser.js

@@ -38,12 +38,13 @@ function ItemUser({ update, setUpdate, isReply, list, setList, data, loading })
                         alt="profile"
                     />
                 )}
-                <div className="flex flex-col items-start justify-center gap-4">
+                <div className="flex flex-col items-start justify-center gap-[8px]">
                     {loading ? (
                         <Skeleton variant="text" className="!min-w-[70px]" />
                     ) : (
                         <>
                             <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">{data.name}</p>
+                            <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">3 روز پیش</p>
                         </>
                     )}
                 </div>