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>

app/dashboard/page.js

@@ -10,6 +10,7 @@ function UserAccount() {
 
     const [value, setValue] = useState(0);
     const [isOpenSide, setIsOpenSide] = useState(false);
+    const [isTurnsDetails, setIsTurnsDetails] = useState(false);
 
     return (
         <DashboardPage
@@ -18,6 +19,8 @@ function UserAccount() {
             user={userData.data}
             isOpenSide={isOpenSide}
             setIsOpenSide={setIsOpenSide}
+            isTurnsDetails={isTurnsDetails}
+            setIsTurnsDetails={setIsTurnsDetails}
         >
             <UserAccountPage
                 value={value}
@@ -25,6 +28,8 @@ function UserAccount() {
                 user={userData.data}
                 isOpenSide={isOpenSide}
                 setIsOpenSide={setIsOpenSide}
+                isTurnsDetails={isTurnsDetails}
+                setIsTurnsDetails={setIsTurnsDetails}
             />
         </DashboardPage>
     )

app/panel/(layout)/dashboard/page.js

@@ -0,0 +1,10 @@
+import DashboardPage from "@/components/panel/dashboard";
+import Information from '@/data/information.json';
+
+function Dashboard() {
+    return (
+        <DashboardPage data={Information} />
+    )
+}
+
+export default Dashboard

app/panel/(layout)/layout.js

@@ -0,0 +1,29 @@
+'use client';
+
+import Header from "@/components/layoutPanel/header";
+import Sidebar from "@/components/layoutPanel/sidebar";
+import Information from '@/data/information.json';
+import UserDetail from "@/components/layoutPanel/userDetail";
+import { usePathname } from "next/navigation";
+
+function LayoutPanel({ children }) {
+
+    const pathname = usePathname()
+
+    return (
+        <div className="flex min-h-screen">
+            <Sidebar />
+            <main className="w-full">
+                <Header />
+                <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
+                    {children}
+                </section>
+            </main>
+            {pathname.includes('dashboard') && (
+                <UserDetail data={Information} />
+            )}
+        </div>
+    )
+}
+
+export default LayoutPanel

app/panel/(layout)/user-account/page.js

@@ -0,0 +1,10 @@
+import UserAccountPage from "@/components/panel/userAccount"
+import Information from '@/data/information.json';
+
+function UserAccount() {
+    return (
+        <UserAccountPage data={Information} />
+    )
+}
+
+export default UserAccount

app/panel/page.js

@@ -1,13 +0,0 @@
-import PanelPage from "@/components/panel";
-import LayoutPanel from "@/components/layoutPanel";
-import Information from '../../data/information.json';
-
-function Panel() {
-    return (
-        <LayoutPanel data={Information}>
-            <PanelPage data={Information} />
-        </LayoutPanel>
-    )
-}
-
-export default Panel