LFFE-25 Implementation of print layout and Printable Page

src/components/layouts/Print/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/Print/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/Print/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/Print/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}/>
+        </>
+    );
+}