feat: hide statistics, work time, expenses and finances from regular users

src/components/Navbar/Navbar.tsx

@@ -15,10 +15,11 @@ import {
     IconSun,
 } from "@tabler/icons-react";
 import classes from "./Navbar.module.css";
-import { useAppDispatch } from "../../redux/store.ts";
+import { RootState, useAppDispatch } from "../../redux/store.ts";
 import { logout } from "../../features/authSlice.ts";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { setHideNavbar } from "../../features/uiSlice.ts";
+import { useSelector } from "react-redux";
 
 interface NavbarLinkProps {
     icon: typeof IconHome2;
@@ -93,17 +94,21 @@ const mockdata = [
         label: "Маркетплейсы",
         href: "/marketplaces",
     },
+];
+
+const adminMockdata = [
     {
         icon: IconChartDots,
         label: "Статистика",
         href: "/statistics",
-    }
+    },
 ];
 
 export function Navbar() {
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
     const router = useRouterState();
+    const role = useSelector((state: RootState) => state.auth.role);
     const { colorScheme, toggleColorScheme } = useMantineColorScheme({
         keepTransitions: true,
     });
@@ -114,9 +119,17 @@ export function Navbar() {
     const onNavlinkClick = (props: NavbarLinkProps) => {
         navigate({ to: props.href });
     };
-    const links = mockdata.map((link, index) => (
-        <NavbarLink
 
+    const getLinksData = () => {
+        let data = mockdata;
+        if (role === "admin") {
+            data = data.concat(adminMockdata);
+        }
+        return data;
+    }
+
+    const links = getLinksData().map((link, index) => (
+        <NavbarLink
             {...link}
             index={index}
             key={link.label}

src/features/authSlice.ts

@@ -1,10 +1,11 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { jwtDecode, JwtPayload } from "jwt-decode";
+import { jwtDecode, JwtPayload as JwtPayloadBase } from "jwt-decode";
 
 interface AuthState {
     isAuthorized: boolean;
     accessToken: string;
     isGuest: boolean;
+    role: string;
 }
 
 const initialState = (): AuthState => {
@@ -16,20 +17,26 @@ const initialState = (): AuthState => {
         accessToken: "",
         isAuthorized: false,
         isGuest: false,
+        role: "user",
     };
 };
 
+interface JwtPayload extends JwtPayloadBase {
+    role: string;
+}
+
 const authSlice = createSlice({
     name: "auth",
     initialState,
     reducers: {
         login: (state, action: PayloadAction<{ accessToken: string }>) => {
             try {
-                const { sub } = jwtDecode<JwtPayload>(
+                const { sub, role } = jwtDecode<JwtPayload>(
-                    action.payload.accessToken
+                    action.payload.accessToken,
                 );
                 state.accessToken = action.payload.accessToken;
                 state.isAuthorized = true;
+                state.role = role;
                 if (sub === "guest") state.isGuest = true;
             } catch (_) {
                 const url = window.location.href;

src/pages/AdminPage/AdminPage.tsx

@@ -3,8 +3,10 @@ import { Tabs } from "@mantine/core";
 import PageBlock from "../../components/PageBlock/PageBlock.tsx";
 import {
     IconBriefcase,
-    IconCalendarUser, IconCoins,
+    IconCalendarUser,
-    IconCurrencyDollar, IconQrcode,
+    IconCoins,
+    IconCurrencyDollar,
+    IconQrcode,
     IconUser,
 } from "@tabler/icons-react";
 import RolesAndPositionsTab from "./tabs/RolesAndPositions/RolesAndPositionsTab.tsx";
@@ -14,8 +16,13 @@ import FinancesTab from "./tabs/Finances/FinancesTab.tsx";
 import WorkTimeTable from "./tabs/WorkTimeTable/ui/WorkTimeTable.tsx";
 import { WorkShiftsTab } from "./tabs/WorkShifts/WorkShiftsTab.tsx";
 import { ExpensesTab } from "./tabs/Expenses/ExpensesTab.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../../redux/store.ts";
 
 const AdminPage = () => {
+    const userRole = useSelector((state: RootState) => state.auth.role);
+    const isAdmin = userRole === "admin";
+
     return (
         <div className={styles["container"]}>
             <PageBlock fullHeight>
@@ -29,31 +36,37 @@ const AdminPage = () => {
                             leftSection={<IconUser />}>
                             Пользователи
                         </Tabs.Tab>
-                        <Tabs.Tab
+                        {isAdmin && (
-                            value={"finances"}
+                            <Tabs.Tab
-                            leftSection={<IconCurrencyDollar />}>
+                                value={"finances"}
-                            Финансы
+                                leftSection={<IconCurrencyDollar />}>
-                        </Tabs.Tab>
+                                Финансы
+                            </Tabs.Tab>
+                        )}
                         <Tabs.Tab
                             value={"rolesAndPositions"}
                             leftSection={<IconBriefcase />}>
                             Должности
                         </Tabs.Tab>
-                        <Tabs.Tab
+                        {isAdmin && (
-                            value={"workTimeTable"}
+                            <Tabs.Tab
-                            leftSection={<IconCalendarUser />}>
+                                value={"workTimeTable"}
-                            Рабочее время
+                                leftSection={<IconCalendarUser />}>
-                        </Tabs.Tab>
+                                Рабочее время
+                            </Tabs.Tab>
+                        )}
                         <Tabs.Tab
                             value={"workShifts"}
                             leftSection={<IconQrcode />}>
                             Смены
                         </Tabs.Tab>
-                        <Tabs.Tab
+                        {isAdmin && (
-                            value={"expenses"}
+                            <Tabs.Tab
-                            leftSection={<IconCoins />}>
+                                value={"expenses"}
-                            Расходы
+                                leftSection={<IconCoins />}>
-                        </Tabs.Tab>
+                                Расходы
+                            </Tabs.Tab>
+                        )}
                     </Tabs.List>
                     <Tabs.Panel value={"users"}>
                         <motion.div

src/pages/StatisticsPage/ui/StatisticsPage.tsx

@@ -1,8 +1,17 @@
 import { StatisticsTab } from "../components/StatisticsTabSegmentedControl/StatisticsTabSegmentedControl.tsx";
 import styles from "./StatisticsPage.module.css";
 import { ProfitTab } from "../tabs/ProfitTab/ProfitTab.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store.ts";
+import { Navigate } from "@tanstack/react-router";
 
 export const StatisticsPage = () => {
+    const userRole = useSelector((state: RootState) => state.auth.role);
+
+    if (userRole !== "admin") {
+        return <Navigate to={"/leads"} />;
+    }
+
     const serviceType = StatisticsTab.PROFIT;
 
     const getBody = () => {