LFFE-7 Merge branch 'feature/LFFE-7_dashboard_layout' into 'develop'

src/components/dashboard/change-password/index.jsx

@@ -1,7 +1,7 @@
 import CenterLayout from "@/layouts/CenterLayout";
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Container} from "@mui/material";
 import ChangePasswordForm from "@/components/dashboard/change-password/change-password-form";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 const DashboardChangePasswordComponent = () => {
     return (

src/components/dashboard/commercial-chief/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_COMMERCIAL_CHIEF} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardCommercialChiefComponent() {
     const t = useTranslations();

src/components/dashboard/development-assistant/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_DEVELOPMENT_ASSISTANT} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardDevelopmentAssistantComponent() {
     const t = useTranslations();

src/components/dashboard/edit-profile/index.jsx

@@ -1,6 +1,5 @@
 import StyledForm from "@/core/components/StyledForm";
 import CenterLayout from "@/layouts/CenterLayout";
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import useUser from "@/lib/app/hooks/useUser";
 import {Box, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
 import * as Yup from "yup";
@@ -12,6 +11,7 @@ import {UPDATE_AVATAR} from "@/core/data/apiRoutes";
 import useDirection from "@/lib/app/hooks/useDirection";
 import Notifications from "@/core/components/notifications";
 import ImageResizer from "@/core/components/ImageConvertor";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 const DashboardEditProfile = () => {
     const t = useTranslations();

src/components/dashboard/expert-management/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_EXPERT_MANAGEMENT} from "@/core/data/apiRoutes";
@@ -8,6 +7,7 @@ import DataTable from "@/core/components/DataTable";
 import TableToolbar from "@/components/dashboard/expert-management/TableToolbar";
 import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardExpertManagementComponent() {
     const t = useTranslations();

src/components/dashboard/first/index.jsx

@@ -1,4 +1,5 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
+import DashboardLayouts from "@/components/layouts/Dashboard";
+
 
 const DashboardFirstComponent = () => {
     return <DashboardLayouts></DashboardLayouts>

src/components/dashboard/inspector-expert/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_INSPECTOR_EXPERT} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardInspectorExpertComponent() {
     const t = useTranslations();

src/components/dashboard/machinary-office/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_MACHINARY_OFFICE} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardMachinaryOfficeComponent() {
     const t = useTranslations();

src/components/dashboard/navgan-loan-management/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_LOAN_MANAGEMENT_NAVGAN} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import DataTable from "@/core/components/DataTable";
 import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardNavganLoanManagementComponent() {
     const t = useTranslations();

src/components/dashboard/navgan-province-manager/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardNavganProvinceManagerComponent() {
     const t = useTranslations();

src/components/dashboard/passenger-boss/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_PASSENGER_BOSS} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardPassengerOfficeComponent() {
     const t = useTranslations();

src/components/dashboard/passenger-office/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_PASSENGER_OFFICE} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardPassengerOfficeComponent() {
     const t = useTranslations();

src/components/dashboard/province-head-expert/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_PROVINCE_HEAD_EXPERT} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import TableRowActions from "./TableRowActions"
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardProvinceHeadExpertComponent() {
     const t = useTranslations();

src/components/dashboard/refahi-loan-management/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_LOAN_MANAGEMENT_REFAHI} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import DataTable from "@/core/components/DataTable";
 import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardRefahiLoanManagementComponent() {
     const t = useTranslations();

src/components/dashboard/refahi-province-manager/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_REFAHI_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardRefahiProvinceManagerComponent() {
     const t = useTranslations();

src/components/dashboard/role-management/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_ROLE_MANAGEMENT} from "@/core/data/apiRoutes";
@@ -8,6 +7,7 @@ import moment from "jalali-moment";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
 import TableToolbar from "@/components/dashboard/role-management/TableToolbar";
 import TableRowActions from "./TableRowActions"
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardRoleManagementComponent() {
     const t = useTranslations();

src/components/dashboard/transportation-assistance/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
@@ -7,6 +6,7 @@ import TableRowActions from "./TableRowActions";
 import moment from "jalali-moment";
 import DataTable from "@/core/components/DataTable";
 import MuiDatePicker from "@/core/components/MuiDatePicker";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardTransportationAssistanceComponent() {
     const t = useTranslations();

src/components/dashboard/user-management/index.jsx

@@ -1,4 +1,3 @@
-import DashboardLayouts from "@/layouts/dashboardLayouts";
 import {Box, FormControl, FormHelperText, IconButton, MenuItem, Select, Stack, Typography} from "@mui/material";
 import {useMemo} from "react";
 import {GET_USER_MANAGEMENT} from "@/core/data/apiRoutes";
@@ -9,6 +8,7 @@ import MuiDatePicker from "@/core/components/MuiDatePicker";
 import TableToolbar from "@/components/dashboard/user-management/TableToolbar";
 import TableRowActions from "./TableRowActions"
 import ClearIcon from "@mui/icons-material/Clear";
+import DashboardLayouts from "@/components/layouts/Dashboard";
 
 function DashboardUserManagementComponent() {
     const t = useTranslations();

src/components/layouts/Dashboard/Breadcrumbs/BreadcrumbItem.jsx

@@ -0,0 +1,19 @@
+import LinkRouting from "@/core/components/LinkRouting";
+import {Typography} from "@mui/material";
+import {useTranslations} from "next-intl";
+
+export default function BreadcrumbItem(props) {
+    const t = useTranslations();
+    const isLast = props.index === props.RouterArray.length - 1;
+    const url = `/${props.RouterArray.slice(0, props.index + 1).join("/")}`;
+
+    return isLast ? (
+        <Typography variant="body2" color="primary">
+            {t("sidebar." + props.label)}
+        </Typography>
+    ) : (
+        <LinkRouting underline="hover" color="inherit" passHref href={url}>
+            <Typography variant="body2">{t("sidebar." + props.label)}</Typography>
+        </LinkRouting>
+    );
+}

src/components/layouts/Dashboard/Breadcrumbs/index.jsx

@@ -0,0 +1,49 @@
+import {useRouter} from "next/router";
+import {Box, Breadcrumbs} from "@mui/material";
+import {useTheme} from "@mui/material/styles";
+import {NavigateBefore, NavigateNext} from "@mui/icons-material";
+import BreadcrumbItem from "./BreadcrumbItem";
+
+const BreadCrumbs = (props) => {
+    const {isVisible} = props;
+    const theme = useTheme();
+    const router = useRouter();
+
+    if (!isVisible) {
+        return null;
+    }
+
+    const {pathname} = router;
+    const RouterArray = pathname.split("/").filter((segment) => segment !== "");
+
+    if (RouterArray.length === 1) {
+        return null;
+    }
+
+    return (
+        <Box p={3} component="span">
+            <Breadcrumbs
+                maxItems={2}
+                separator={
+                    theme.direction === "ltr" ? (
+                        <NavigateNext fontSize="small"/>
+                    ) : (
+                        <NavigateBefore fontSize="small"/>
+                    )
+                }
+                aria-label="breadcrumb"
+            >
+                {RouterArray.map((segment, index) => (
+                    <BreadcrumbItem
+                        RouterArray={RouterArray}
+                        label={segment}
+                        key={segment}
+                        index={index}
+                    />
+                ))}
+            </Breadcrumbs>
+        </Box>
+    );
+};
+
+export default BreadCrumbs;

src/components/layouts/Dashboard/Header/ProfileData.jsx

@@ -0,0 +1,18 @@
+import {Avatar, Stack, Typography} from "@mui/material";
+import useUser from "@/lib/app/hooks/useUser";
+
+export default function ProfileData() {
+    const {user} = useUser();
+    return (
+        <Stack alignItems="center" spacing={2} sx={{p: 3}}>
+            <Avatar
+                sx={{width: "80px", height: "80px"}}
+                alt="User Image"
+                src={user.avatar}
+            />
+            <Typography sx={{fontSize: 15, fontWeight: 600}} textAlign="center">
+                {user.username}
+            </Typography>
+        </Stack>
+    );
+}

src/components/layouts/Dashboard/Header/ProfileMenu.jsx

@@ -0,0 +1,62 @@
+import {Avatar, IconButton, Menu, Tooltip} from "@mui/material";
+import {useState} from "react";
+import ProfileData from "./ProfileData";
+import ProfileOptions from "./ProfileOptions";
+import {useTranslations} from "next-intl";
+import useUser from "@/lib/app/hooks/useUser";
+
+function ProfileMenu() {
+    const t = useTranslations();
+    const [anchorElUser, setAnchorElUser] = useState(null);
+    const {user} = useUser();
+
+    const handleOpenUserMenu = (event) => {
+        setAnchorElUser(event.currentTarget);
+    };
+    const handleCloseUserMenu = () => {
+        setAnchorElUser(null);
+    };
+
+    return (
+        <>
+            <Tooltip title={t("header.open_profile")} arrow>
+                <IconButton onClick={handleOpenUserMenu} sx={{p: 0}}>
+                    <Avatar
+                        sx={{
+                            width: 24,
+                            height: 24,
+                            backgroundColor: "#fff",
+                            color: "primary.main",
+                        }}
+                        alt="User Image"
+                        src={user.avatar}
+                    />
+                </IconButton>
+            </Tooltip>
+            <Menu
+                MenuListProps={{sx: {py: 0}}}
+                sx={{
+                    mt: 6,
+                }}
+                id="menu-appbar"
+                anchorEl={anchorElUser}
+                anchorOrigin={{
+                    vertical: "top",
+                    horizontal: "right",
+                }}
+                keepMounted
+                transformOrigin={{
+                    vertical: "top",
+                    horizontal: "right",
+                }}
+                open={Boolean(anchorElUser)}
+                onClose={handleCloseUserMenu}
+            >
+                <ProfileData/>
+                <ProfileOptions handleCloseUserMenu={handleCloseUserMenu}/>
+            </Menu>
+        </>
+    );
+}
+
+export default ProfileMenu;

src/components/layouts/Dashboard/Header/ProfileOptionLogOut.jsx

@@ -0,0 +1,49 @@
+import {Box, Button, MenuItem, Typography} from "@mui/material";
+import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
+import useUser from "@/lib/app/hooks/useUser";
+import {useTranslations} from "next-intl";
+
+export default function ProfileOptionLogOut({handleCloseUserMenu}) {
+    const t = useTranslations();
+    const {clearToken} = useUser();
+    const handleClickLogOut = () => {
+        handleCloseUserMenu();
+        clearToken();
+    };
+    return (
+        <>
+            <MenuItem
+                component={Button}
+                to={{
+                    pathname: "/dashboard/logout",
+                }}
+                sx={{
+                    display: "flex",
+                    justifyContent: "center",
+                    borderTop: 1,
+                    px: 3,
+                    py: 1.5,
+                    borderColor: "#e1e1e1",
+                    textTransform: "unset",
+                }}
+                onClick={handleClickLogOut}
+            >
+                <Box sx={{display: "flex", alignItems: "center", flex: 1}}>
+                    <Box
+                        sx={{
+                            display: "flex",
+                            alignItems: "center",
+                            color: "primary.main",
+                            pr: 2,
+                        }}
+                    >
+                        <MeetingRoomIcon/>
+                    </Box>
+                    <Typography sx={{flex: 1}} textAlign="start">
+                        {t("header.logout")}
+                    </Typography>
+                </Box>
+            </MenuItem>
+        </>
+    );
+}

src/components/layouts/Dashboard/Header/ProfileOptions.jsx

@@ -0,0 +1,49 @@
+import {Box, MenuItem, Typography} from "@mui/material";
+import {NextLinkComposed} from "@/core/components/LinkRouting";
+import {useTranslations} from "next-intl";
+import headerProfileItems from "@/core/data/headerProfileItems";
+import ProfileOptionLogOut from "./ProfileOptionLogOut";
+
+export default function ProfileOptions({handleCloseUserMenu}) {
+    const t = useTranslations();
+
+    return (
+        <>
+            {headerProfileItems.map((profile_item) => (
+                <MenuItem
+                    component={NextLinkComposed}
+                    to={{
+                        pathname: profile_item.route,
+                    }}
+                    sx={{
+                        display: "flex",
+                        justifyContent: "center",
+                        borderTop: 1,
+                        px: 3,
+                        py: 1.5,
+                        borderColor: "#e1e1e1",
+                    }}
+                    key={profile_item.key}
+                    onClick={handleCloseUserMenu}
+                >
+                    <Box sx={{display: "flex", alignItems: "center", flex: 1}}>
+                        <Box
+                            sx={{
+                                display: "flex",
+                                alignItems: "center",
+                                color: "primary.main",
+                                pr: 2,
+                            }}
+                        >
+                            {profile_item.icon}
+                        </Box>
+                        <Typography sx={{flex: 1}} textAlign="start">
+                            {t(profile_item.name)}
+                        </Typography>
+                    </Box>
+                </MenuItem>
+            ))}
+            <ProfileOptionLogOut handleCloseUserMenu={handleCloseUserMenu}/>
+        </>
+    );
+}

src/components/layouts/Dashboard/Header/index.jsx

@@ -0,0 +1,72 @@
+import MenuIcon from "@mui/icons-material/Menu";
+import {AppBar, Box, Container, CssBaseline, IconButton, Stack, Toolbar, useTheme} from "@mui/material";
+import ProfileMenu from "./ProfileMenu";
+
+function Header({drawerWidth, handleDrawerToggle}) {
+    const theme = useTheme();
+
+    return (
+        <>
+            <CssBaseline/>
+            <AppBar
+                position="fixed"
+                sx={{
+                    width: {md: `calc(100% - ${drawerWidth}px)`},
+                    ml: {md: `${drawerWidth}px`},
+                }}
+            >
+                <Container maxWidth="xxl">
+                    <Toolbar
+                        disableGutters
+                        sx={{
+                            display: "flex",
+                        }}
+                    >
+                        <Stack direction="row" justifyContent="flex-start" sx={{flex: 1}}>
+                            <IconButton
+                                color="inherit"
+                                aria-label="open drawer"
+                                onClick={handleDrawerToggle}
+                                edge="start"
+                                sx={{display: {md: "none"}, m: 0}}
+                            >
+                                <MenuIcon/>
+                            </IconButton>
+                        </Stack>
+                        <Stack
+                            direction="row"
+                            justifyContent="center"
+                            sx={{
+                                flex: 1,
+                                position: "relative",
+                                ...theme.mixins.toolbar,
+                            }}
+                        >
+                            <Box
+                                sx={{
+                                    position: "relative",
+                                    my: 1,
+                                    width: 56,
+                                    height: 56,
+                                    "@media (min-width:600px)": {maxWidth: 64, maxHeight: 64},
+                                    "@media (min-width:0px)": {
+                                        "@media (orientation: landscape)": {
+                                            width: 48,
+                                            height: 48,
+                                        },
+                                    },
+                                }}
+                            >
+                            </Box>
+                        </Stack>
+                        <Stack direction="row" justifyContent="flex-end" sx={{flex: 1}}>
+                            <ProfileMenu/>
+                        </Stack>
+                    </Toolbar>
+                </Container>
+            </AppBar>
+        </>
+    );
+}
+
+export default Header;

src/components/layouts/Dashboard/Sidebar/SidebarDrawer.jsx

@@ -0,0 +1,27 @@
+import {Divider, Stack, Toolbar, Typography} from "@mui/material";
+import {useTranslations} from "next-intl";
+import SidebarList from "./SidebarList";
+import useUser from "@/lib/app/hooks/useUser";
+
+const SidebarDrawer = ({handleDrawerToggle}) => {
+    const {user} = useUser()
+    const t = useTranslations();
+    return (
+        <>
+            <Toolbar>
+                <Stack>
+                    <Typography variant="h6" sx={{color: "primary.main"}}>
+                        {t("app_short_name")}
+                    </Typography>
+                    <Typography variant="caption">
+                        {user.name} | {user.position}
+                    </Typography>
+                </Stack>
+            </Toolbar>
+            <Divider/>
+            <SidebarList handleDrawerToggle={handleDrawerToggle}/>
+        </>
+    );
+};
+
+export default SidebarDrawer;

src/components/layouts/Dashboard/Sidebar/SidebarList.jsx

@@ -0,0 +1,57 @@
+import {Divider, List} from "@mui/material";
+import {useEffect, useReducer} from "react";
+import SidebarListItem from "./SidebarListItem";
+import sidebarMenu from "@/core/data/sidebarMenu";
+import {useRouter} from "next/router";
+import useUser from "@/lib/app/hooks/useUser";
+
+function reducer(state, action) {
+    switch (action.type) {
+        case "COLLAPSE_MENU":
+            return state.map((itemsArr) =>
+                itemsArr.map((item) =>
+                    action.key == item.key
+                        ? {...item, showSubItem: !item.showSubItem}
+                        : item
+                )
+            );
+        case "SELECTED":
+            return state.map((itemsArr) =>
+                itemsArr.map((item) =>
+                    action.route == item.route
+                        ? {...item, selected: true}
+                        : {...item, selected: false}
+                )
+            );
+        default:
+            throw new Error();
+    }
+}
+
+export default function SidebarList({handleDrawerToggle}) {
+    const [itemMenu, dispatch] = useReducer(reducer, sidebarMenu);
+    const {user} = useUser();
+    const router = useRouter();
+
+    useEffect(() => {
+        dispatch({type: "SELECTED", route: router.pathname});
+    }, [router.pathname]);
+
+    const filteredItemMenu = itemMenu[0].filter(
+        (item) => user.permissions.includes(item.permission) || item.permission === "all"
+    );
+
+    return (
+        <List>
+            {filteredItemMenu.map((item, index) => (
+                <SidebarListItem
+                    item={item}
+                    dispatch={dispatch}
+                    key={item.key}
+                    handleDrawerToggle={handleDrawerToggle}
+                />
+            ))}
+            {filteredItemMenu.length > 0 && <Divider/>}
+        </List>
+    );
+}

src/components/layouts/Dashboard/Sidebar/SidebarListItem.jsx

@@ -0,0 +1,84 @@
+import {NextLinkComposed} from "@/core/components/LinkRouting";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import {Badge, IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography,} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {Fragment} from "react";
+import SidebarListSubItem from "./SidebarListSubItem";
+import useNotification from "@/lib/app/hooks/useNotification";
+
+const SidebarListItem = ({item, dispatch, handleDrawerToggle}) => {
+    const t = useTranslations();
+    const {notification_count} = useNotification()
+
+    return (
+        <Fragment key={item.key}>
+            <ListItem disablePadding secondaryAction={
+                <IconButton>
+                    <Badge
+                        badgeContent={notification_count ? notification_count[item.name] : 0}
+                        color="error"
+                        variant="standard"
+                        anchorOrigin={{
+                            vertical: "top",
+                            horizontal: "right",
+                        }}
+                    />
+                </IconButton>
+            }>
+                <ListItemButton
+                    selected={item.selected}
+                    {...(item.type == "page" && {
+                        component: NextLinkComposed,
+                        to: {
+                            pathname: item.route,
+                        },
+                    })}
+                    onClick={() => {
+                        if (item.type == "menu") {
+                            dispatch({type: "COLLAPSE_MENU", key: item.key});
+                        }
+                        handleDrawerToggle();
+                    }}
+                    sx={{
+                        minHeight: 48,
+                    }}
+
+                >
+                    <ListItemIcon
+                        sx={{
+                            minWidth: 0,
+                            justifyContent: "center",
+                            color: "primary.main",
+                            pr: 2,
+                        }}
+                    >
+                        {item.icon}
+                    </ListItemIcon>
+                    <ListItemText
+                        primary={t(item.key)}
+                        secondary={
+                            item.secondary !== undefined ? (
+                                <Typography variant="caption" color="textSecondary">
+                                    {t(item.secondary)}
+                                </Typography>
+                            ) : null
+                        }
+                    />
+
+
+                    {item.type == "menu" &&
+                        (item.showSubItem ? <ExpandLess/> : <ExpandMore/>)}
+                </ListItemButton>
+            </ListItem>
+            {item.subItem && (
+                <SidebarListSubItem
+                    item={item}
+                    handleDrawerToggle={handleDrawerToggle}
+                />
+            )}
+        </Fragment>
+    );
+};
+
+export default SidebarListItem;

src/components/layouts/Dashboard/Sidebar/SidebarListSubItem.jsx

@@ -0,0 +1,48 @@
+import {NextLinkComposed} from "@/core/components/LinkRouting";
+import InboxIcon from "@mui/icons-material/MoveToInbox";
+import {Collapse, List, ListItemButton, ListItemIcon, ListItemText,} from "@mui/material";
+import {useTranslations} from "next-intl";
+import {Fragment} from "react";
+
+const SidebarListSubItem = ({item, handleDrawerToggle}) => {
+    const t = useTranslations();
+
+    return (
+        <Collapse in={item.showSubItem} timeout="auto" unmountOnExit>
+            <List component="div" disablePadding sx={{bgcolor: "#f6f6f6"}}>
+                {item.subItem.map((subitem, index) => (
+                    <Fragment key={subitem.key}>
+                        <ListItemButton
+                            component={NextLinkComposed}
+                            to={{
+                                pathname: subitem.route,
+                            }}
+                            sx={{
+                                minHeight: 48,
+                            }}
+                            onClick={(event) => {
+                                if (item.type == "menu") {
+                                    dispatch({type: "COLLAPSE_MENU", key: item.key});
+                                }
+                                handleDrawerToggle();
+                            }}
+                        >
+                            <ListItemIcon
+                                sx={{
+                                    minWidth: 0,
+                                    justifyContent: "center",
+                                    pr: 2,
+                                }}
+                            >
+                                <InboxIcon/>
+                            </ListItemIcon>
+                            <ListItemText primary={t(subitem.key)}/>
+                        </ListItemButton>
+                    </Fragment>
+                ))}
+            </List>
+        </Collapse>
+    );
+};
+
+export default SidebarListSubItem;

src/components/layouts/Dashboard/Sidebar/index.jsx

@@ -0,0 +1,46 @@
+import {Box, Drawer} from "@mui/material";
+import SidebarDrawer from "./SidebarDrawer";
+
+const Sidebar = (props) => {
+    return (
+        <Box
+            component="nav"
+            sx={{width: {md: props.drawerWidth}, flexShrink: {sm: 0}}}
+            aria-label="mailbox folders"
+        >
+            <Drawer
+                container={props.container}
+                variant="temporary"
+                open={props.mobileOpen}
+                onClose={props.handleDrawerToggle}
+                ModalProps={{
+                    keepMounted: true,
+                }}
+                sx={{
+                    display: {xs: "block", md: "none"},
+                    "& .MuiDrawer-paper": {
+                        boxSizing: "border-box",
+                        width: props.drawerWidth,
+                    },
+                }}
+            >
+                <SidebarDrawer handleDrawerToggle={props.handleDrawerToggle}/>
+            </Drawer>
+            <Drawer
+                variant="permanent"
+                sx={{
+                    display: {xs: "none", md: "block"},
+                    "& .MuiDrawer-paper": {
+                        boxSizing: "border-box",
+                        width: props.drawerWidth,
+                    },
+                }}
+                open
+            >
+                <SidebarDrawer handleDrawerToggle={props.handleDrawerToggle}/>
+            </Drawer>
+        </Box>
+    );
+};
+
+export default Sidebar;

src/components/layouts/Dashboard/index.jsx

@@ -0,0 +1,45 @@
+import {useState} from "react";
+import Header from "./header";
+import Sidebar from "./sidebar";
+import {Toolbar} from "@mui/material";
+import BreadCrumbs from "./breadcrumbs";
+import FullPageLayout from "@/layouts/FullPageLayout";
+
+const drawerWidth = 240;
+
+const DashboardLayouts = (props) => {
+    const {window} = props;
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const container =
+        window !== undefined ? () => window().document.body : undefined;
+
+    const handleDrawerToggle = () => {
+        setMobileOpen(!mobileOpen);
+    };
+    return (
+        <FullPageLayout direction="row">
+            <Header
+                handleDrawerToggle={handleDrawerToggle}
+                drawerWidth={drawerWidth}
+            />
+            <Sidebar
+                container={container}
+                mobileOpen={mobileOpen}
+                handleDrawerToggle={handleDrawerToggle}
+                drawerWidth={drawerWidth}
+            />
+            <FullPageLayout
+                component="main"
+                sx={{flexGrow: 1, width: {sm: `calc(100% - ${drawerWidth}px)`}}}
+            >
+                <Toolbar/>
+                <FullPageLayout sx={{mt: 3}}>
+                    <BreadCrumbs isVisible={true}/>
+                    {props.children}
+                </FullPageLayout>
+            </FullPageLayout>
+        </FullPageLayout>
+    );
+};
+
+export default DashboardLayouts;