complete profile part and start working on update profile and changing password

src/components/layouts/dashboard/headerWithSidebar/index.jsx

@@ -2,10 +2,11 @@
 import SidebarMenu from "@/core/components/SidebarMenu";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import MenuIcon from "@mui/icons-material/Menu";
-import { Box, Drawer, IconButton, Stack, styled, Toolbar } from "@mui/material";
+import { Box, Drawer, IconButton, Stack, styled, Toolbar, Typography } from "@mui/material";
 import MuiAppBar from "@mui/material/AppBar";
 import { useState } from "react";
 import HeaderMenu from "./HeaderMenu";
+import moment from "jalali-moment";
 
 const drawerWidth = 300;
 
@@ -54,6 +55,7 @@ const DrawerHeader = styled("div")(({ theme }) => ({
 
 const HeaderWithSidebar = ({ children }) => {
     const [open, setOpen] = useState(true);
+    const now = moment().locale("fa").format("HH:mm | YYYY/MM/DD");
 
     const handleDrawerOpen = () => {
         setOpen(true);
@@ -90,14 +92,15 @@ const HeaderWithSidebar = ({ children }) => {
                         boxSizing: "border-box",
                         borderTop: 1,
                         borderTopColor: "divider",
-                        position: 'inherit'
+                        position: "inherit",
                     },
                 }}
                 variant="persistent"
                 anchor="left"
                 open={open}
             >
-                <DrawerHeader>
+                <DrawerHeader sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                    <Typography variant="subtitle2" color="#757575" sx={{ px: 1 }}>تاریخ امروز: {now}</Typography>
                     <IconButton onClick={handleDrawerClose}>
                         <ChevronRightIcon />
                     </IconButton>

src/core/components/Profile/ChangePass/index.jsx

@@ -0,0 +1,52 @@
+"use client";
+
+import {
+    Box,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    useMediaQuery,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import CloseIcon from "@mui/icons-material/Close";
+
+const ChangePass = ({ open, setOpen }) => {
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+
+    return (
+        <Dialog fullScreen={fullScreen} maxWidth="sm" fullWidth={true} open={open}
+                onClose={() => {
+                    setOpen(false);
+                }}>
+            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mx: 1 }}>
+                <DialogTitle sx={{ py: 2, px: 1 }}>
+                    تغییر رمز عبور
+                </DialogTitle>
+                <IconButton
+                    aria-label="بستن تغییر رمز عبور"
+                    onClick={() => {
+                        setOpen(false);
+                    }}
+                    sx={{ color: (theme) => theme.palette.grey[500] }}
+                >
+                    <CloseIcon />
+                </IconButton>
+            </Box>
+            <DialogContent dividers>
+                تست
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus variant="outlined" onClick={() => {
+                    setOpen(false);
+                }}>
+                    ثبت
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+export default ChangePass;

src/core/components/Profile/Update/index.jsx

@@ -0,0 +1,52 @@
+"use client";
+
+import {
+    Box,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    useMediaQuery,
+} from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import CloseIcon from "@mui/icons-material/Close";
+
+const Update = ({ open, setOpen }) => {
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+
+    return (
+        <Dialog fullScreen={fullScreen} maxWidth="sm" fullWidth={true} open={open}
+                onClose={() => {
+                    setOpen(false);
+                }}>
+            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mx: 1 }}>
+                <DialogTitle sx={{ py: 2, px: 1 }}>
+                    ویرایش پروفایل
+                </DialogTitle>
+                <IconButton
+                    aria-label="بستن ویرایش پروفایل"
+                    onClick={() => {
+                        setOpen(false);
+                    }}
+                    sx={{ color: (theme) => theme.palette.grey[500] }}
+                >
+                    <CloseIcon />
+                </IconButton>
+            </Box>
+            <DialogContent dividers>
+                form will come here
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus variant="outlined" onClick={() => {
+                    setOpen(false);
+                }}>
+                    ثبت
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+export default Update;

src/core/components/Profile/index.jsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { Avatar, Box, Chip, Divider, IconButton, Stack, Tooltip, Typography } from "@mui/material";
+import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
+import ModeEditIcon from "@mui/icons-material/ModeEdit";
+import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import { useState } from "react";
+import Update from "@/core/components/Profile/Update";
+import ChangePass from "@/core/components/Profile/ChangePass";
+
+const Profile = () => {
+    const [openUpdate, setOpenUpdate] = useState(false);
+    const [openChangePass, setOpenChangePass] = useState(false);
+
+    return (
+        <>
+            <Stack sx={{
+                px: 2,
+                background: "#f7f7f7",
+                borderTop: "1px dashed #e1e1e1",
+                borderBottom: "1px dashed #e1e1e1",
+            }}>
+                <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
+                    <Avatar
+                        alt="User Image"
+                        src=""
+                        sx={{ width: 56, height: 56 }}
+                    />
+                    <Stack sx={{ ml: 1 }}>
+                        <Box sx={{ display: "flex", alignItems: "end", gap: 0.7 }}>
+                            <Typography variant="h6">حسن محمد زاده عبدالله</Typography>
+                        </Box>
+                        <Typography variant="caption">.: اداره کل ستاد :.</Typography>
+                    </Stack>
+                </Box>
+                <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
+                    <Typography variant="button" color="#757575">آخرین ورود</Typography>
+                    <Divider sx={{ mx: 2, flexGrow: 1 }} />
+                    <Typography variant="subtitle2" color="#757575">1 ساعت پیش</Typography>
+                </Box>
+                <Box sx={{ my: 0.5 }}>
+                    <Divider>
+                        <Chip size="small" label="userName" color="success" variant="outlined" />
+                    </Divider>
+                </Box>
+                <Box sx={{ display: "flex", justifyContent: "center" }}>
+                    <Tooltip title="ویرایش پروفایل" arrow>
+                        <IconButton aria-label="ویرایش پروفایل" color="success" onClick={() => {
+                            setOpenUpdate(true);
+                        }}>
+                            <ModeEditIcon />
+                        </IconButton>
+                    </Tooltip>
+                    <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} />
+                    <Tooltip title="خروج" arrow>
+                        <IconButton aria-label="خروج" color="error">
+                            <PowerSettingsNewIcon />
+                        </IconButton>
+                    </Tooltip>
+                    <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 1 }} />
+                    <Tooltip title="تغییر رمز عبور" arrow>
+                        <IconButton aria-label="تغییر رمز عبور" color="primary" onClick={() => {
+                            setOpenChangePass(true);
+                        }}>
+                            <VpnKeyIcon />
+                        </IconButton>
+                    </Tooltip>
+                </Box>
+            </Stack>
+            <Update open={openUpdate} setOpen={setOpenUpdate} />
+            <ChangePass open={openChangePass} setOpen={setOpenChangePass} />
+        </>
+    );
+};
+export default Profile;

src/core/components/SidebarMenu.jsx

@@ -1,13 +1,12 @@
 "use client";
 import SidebarListItems from "@/core/components/SidebarListItems";
 import { usePermissions } from "@/lib/hooks/usePermissions";
-import { Avatar, Box, Divider, IconButton, List, Stack, Typography } from "@mui/material";
+import { List } from "@mui/material";
 import { usePathname } from "next/navigation";
 import { useEffect, useReducer, useState } from "react";
 import { filterMenuItems } from "../utils/filterMenuItems";
-import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
-import ModeEditIcon from "@mui/icons-material/ModeEdit";
 import { pageMenu } from "../utils/pageMenu";
+import Profile from "@/core/components/Profile";
 
 function selectPage(item, route) {
     if (item.type === "page") {
@@ -115,36 +114,7 @@ const SidebarMenu = () => {
 
     return (
         <>
-            <Stack sx={{ px: 2 }}>
+            <Profile />
-                <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
-                    <Avatar
-                        alt="User Image"
-                        src=""
-                        sx={{ width: 56, height: 56 }}
-                    />
-                    <Stack sx={{ ml: 1 }}>
-                        <Box sx={{ display: "flex", alignItems: "end", gap: 0.7 }}>
-                            <Typography variant="h6">شرکت وایتل</Typography>
-                            <Typography variant="subtitle2" color="#757575">(userName)</Typography>
-                        </Box>
-                        <Typography variant="caption">.: اداره کل ستاد :.</Typography>
-                    </Stack>
-                </Box>
-                <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
-                    <Typography variant="button" color="#757575">آخرین ورود</Typography>
-                    <Divider sx={{ mx: 2, flexGrow: 1 }} />
-                    <Typography variant="subtitle2" color="#757575">1 ساعت پیش</Typography>
-                </Box>
-                <Box sx={{ display: "flex", justifyContent: "center" }}>
-                    <IconButton aria-label="log out" color="error">
-                        <PowerSettingsNewIcon />
-                    </IconButton>
-                    <Divider orientation="vertical" variant="middle" flexItem />
-                    <IconButton aria-label="edit profile" color="primary">
-                        <ModeEditIcon />
-                    </IconButton>
-                </Box>
-            </Stack>
             {
                 userPermissions && (
                     <List sx={{ overflow: "auto" }} disablePadding dense>

src/lib/contexts/tableSetting.js

@@ -1,4 +1,5 @@
 "use client";
+
 import { createContext, useCallback, useEffect, useState } from "react";
 import LZString from "lz-string";