feat: logout button in the deals viewer mode

src/pages/CardsPage/components/CardsPageHeader/CardsPageHeader.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Flex, rem, Text } from "@mantine/core";
-import { IconEdit, IconMenu2, IconMenuDeep, IconPlus } from "@tabler/icons-react";
+import { ActionIcon, Button, Flex, rem, Text, Tooltip } from "@mantine/core";
+import { IconEdit, IconLogout, IconMenu2, IconMenuDeep, IconPlus } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import styles from "../../ui/CardsPage.module.css";
 import PageBlock from "../../../../components/PageBlock/PageBlock.tsx";
@@ -11,9 +11,12 @@ import ObjectSelect from "../../../../components/ObjectSelect/ObjectSelect.tsx";
 import CardsTableFiltersModal from "../../modals/CardsTableFiltersModal.tsx";
 import { useProjectsEditorContext } from "../../contexts/ProjectsEditorContext.tsx";
 import { useSelector } from "react-redux";
-import { RootState } from "../../../../redux/store.ts";
+import { RootState, useAppDispatch } from "../../../../redux/store.ts";
 import { useProjectsContext } from "../../../../contexts/ProjectsContext.tsx";
 import { modals } from "@mantine/modals";
+import classes from "../../../../components/Navbar/Navbar.module.css";
+import { logout } from "../../../../features/authSlice.ts";
+import { useNavigate } from "@tanstack/react-router";
 
 type Props = {
     displayMode: DisplayMode;
@@ -29,6 +32,8 @@ const CardsPageHeader = ({
     const { openProjectsEditor } = useProjectsEditorContext();
     const { selectedProject, setSelectedProject, projects, refetchProjects } = useProjectsContext();
     const { role: userRole, isDealsViewer } = useSelector((state: RootState) => state.auth);
+    const navigate = useNavigate();
+    const dispatch = useAppDispatch();
     const isAdmin = userRole === "admin";
 
     const handleCreateClick = () => {
@@ -42,6 +47,31 @@ const CardsPageHeader = ({
         });
     };
 
+    const onLogoutClick = () => {
+        dispatch(logout());
+        navigate({ to: "/login" });
+    };
+
+    const getLogoutButton = () => {
+        return (
+            <Tooltip
+                display={"flex"}
+                label={"Выйти"}
+                position="right"
+                transitionProps={{ duration: 0 }}>
+                <Button
+                    variant={"default"}
+                    onClick={() => onLogoutClick()}
+                    className={classes.link}>
+                    <IconLogout
+                        style={{ width: rem(20), height: rem(20) }}
+                        stroke={1.5}
+                    />
+                </Button>
+            </Tooltip>
+        );
+    };
+
     const getHeaderInputsBoard = () => {
         return (
             <div
@@ -66,7 +96,9 @@ const CardsPageHeader = ({
                         </ActionIcon>
                     </>
                 )}
-                {!isDealsViewer && (
+                {isDealsViewer ? (
+                    getLogoutButton()
+                ) : (
                     <ObjectSelect
                         placeholder={"Выберите проект"}
                         data={projects}