diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index fac1aaf..36b7172 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/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) => ( - { + let data = mockdata; + if (role === "admin") { + data = data.concat(adminMockdata); + } + return data; + } + + const links = getLinksData().map((link, index) => ( + { @@ -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( - action.payload.accessToken + const { sub, role } = jwtDecode( + 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; diff --git a/src/pages/AdminPage/AdminPage.tsx b/src/pages/AdminPage/AdminPage.tsx index 0bf78ea..8d1c3f5 100644 --- a/src/pages/AdminPage/AdminPage.tsx +++ b/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, - IconCurrencyDollar, IconQrcode, + IconCalendarUser, + 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 (
@@ -29,31 +36,37 @@ const AdminPage = () => { leftSection={}> Пользователи - }> - Финансы - + {isAdmin && ( + }> + Финансы + + )} }> Должности - }> - Рабочее время - + {isAdmin && ( + }> + Рабочее время + + )} }> Смены - }> - Расходы - + {isAdmin && ( + }> + Расходы + + )} { + const userRole = useSelector((state: RootState) => state.auth.role); + + if (userRole !== "admin") { + return ; + } + const serviceType = StatisticsTab.PROFIT; const getBody = () => {