feat: const for routes and init profile page

src/pages/App/MenuList.js

@@ -1,9 +1,10 @@
 import React, {useEffect, useState} from "react";
 import {Menu} from "antd";
 import {Link} from "react-router-dom";
-import {HomeOutlined,} from "@ant-design/icons";
+import {HomeOutlined, UserOutlined,} from "@ant-design/icons";
 import {observer} from "mobx-react-lite";
 import {useStore} from "../../utils/useStore";
+import {LINKS} from "../../routes/app";
 
 const {SubMenu} = Menu;
 
@@ -34,29 +35,35 @@ export const MenuList = observer((props) => {
 			forceSubMenuRender={true}
 		>
 			<Menu.Item key="home">
-				<Link to={'/app/home'}>
+				<Link to={LINKS.HOME}>
 					<HomeOutlined/>
 					<span>Home</span>
 				</Link>
 			</Menu.Item>
 			{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
-				<Link to={'/app/membership'}>
+				<Link to={LINKS.MEMBERSHIP}>
 					<HomeOutlined/>
 					<span>Membership</span>
 				</Link>
 			</Menu.Item>}
 			{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
-				<Link to={'/app/product'}>
+				<Link to={LINKS.PRODUCT}>
 					<HomeOutlined/>
 					<span>Product</span>
 				</Link>
 			</Menu.Item>}
-			{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
-				<Link to={'/app/transaction'}>
+			{store.authentication.userData.role === ('Supervisor' || 'Sales') && <Menu.Item key="transaction">
+				<Link to={LINKS.TRANSACTION}>
 					<HomeOutlined/>
 					<span>Transaction</span>
 				</Link>
 			</Menu.Item>}
+			<Menu.Item key="profile">
+				<Link to={LINKS.PROFILE}>
+					<UserOutlined/>
+					<span>Profile</span>
+				</Link>
+			</Menu.Item>
 			{/*<Menu.Item key="about">*/}
 			{/*	<Link to={'/app/about'}>*/}
 			{/*		<CalendarOutlined/>*/}