Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

src/component/ProductComponent.js

@@ -5,6 +5,7 @@ import {ExclamationCircleOutlined} from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
 import {capitalize} from "lodash";
 import {useStore} from "../utils/useStore";
+import {LINKS} from "../routes/app";
 
 export const ProductComponent = observer((props) => {
     const store = useStore();
@@ -113,7 +114,7 @@ export const ProductComponent = observer((props) => {
             console.log(id);
             await store.product.delete(id);
             message.success("Data Berhasil Dihapus");
-            history.push("/app/product");
+            history.push(LINKS.PRODUCT);
         } catch (err) {
             console.log("error", err);
             message.error("Gagal menghapus");

src/pages/App/DesktopLayout.js

@@ -2,8 +2,8 @@ import React, {useState} from "react";
 import {Button, Drawer, Layout, Menu, Popover, Typography,} from "antd";
 import {MenuList} from "./MenuList";
 import {Link, useHistory} from "react-router-dom";
-import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
+import {HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
-import {AppRoute} from "../../routes/app";
+import {AppRoute, LINKS} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {useMediaQuery} from "react-responsive";
@@ -104,35 +104,41 @@ export const DesktopLayout = observer(() => {
                     >
                         <Menu>
                             <Menu.Item key="home">
-                                <Link to={'/app/home'}>
+                                <Link to={LINKS.HOME}>
                                     <HomeOutlined/>
                                     <span>Home</span>
                                 </Link>
                             </Menu.Item>
-                            <Menu.Item key="membership">
+                            {store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
-                                <Link to={'/app/membership'}>
+                                <Link to={LINKS.MEMBERSHIP}>
                                     <HomeOutlined/>
                                     <span>Membership</span>
                                 </Link>
-                            </Menu.Item>
+                            </Menu.Item>}
-                            <Menu.Item key="product">
+                            {store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
-                                <Link to={'/app/product'}>
+                                <Link to={LINKS.PRODUCT}>
                                     <HomeOutlined/>
                                     <span>Product</span>
                                 </Link>
-                            </Menu.Item>
+                            </Menu.Item>}
-                            <Menu.Item key="transaction">
+                            {store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
-                                <Link to={'/app/transaction'}>
+                                <Link to={LINKS.TRANSACTION}>
                                     <HomeOutlined/>
                                     <span>Transaction</span>
                                 </Link>
-                            </Menu.Item>
+                            </Menu.Item>}
-                            <Menu.Item key="about">
+                            <Menu.Item key="profile">
-                                <Link to={'/app/about'}>
+                                <Link to={LINKS.PROFILE}>
-                                    <CalendarOutlined/>
+                                    <UserOutlined/>
-                                    <span>About</span>
+                                    <span>Profile</span>
                                 </Link>
                             </Menu.Item>
+                            {/*<Menu.Item key="about">*/}
+                            {/*    <Link to={'/app/about'}>*/}
+                            {/*        <CalendarOutlined/>*/}
+                            {/*        <span>About</span>*/}
+                            {/*    </Link>*/}
+                            {/*</Menu.Item>*/}
                             <Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
                         </Menu>
                     </div>
@@ -261,7 +267,7 @@ export const DesktopLayout = observer(() => {
                                             mode="inline"
                                         >
                                             <Menu.Item>
-                                                <Link to="/app/profile">
+                                                <Link to={LINKS.PROFILE}>
                                                     <span>Profile</span>
                                                 </Link>
                                             </Menu.Item>
@@ -352,7 +358,7 @@ export const DesktopLayout = observer(() => {
                                         mode="inline"
                                     >
                                         <Menu.Item key={'profile'}>
-                                            <Link to="/app/profile">
+                                            <Link to={LINKS.PROFILE}>
                                                 <span>Profile</span>
                                             </Link>
                                         </Menu.Item>

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">
+			{store.authentication.userData.role === ('Retail' || 'Admin') && <Menu.Item key="transaction">
-				<Link to={'/app/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/>*/}

src/pages/Login/Login.js

@@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite';
 import {useStore} from "../../utils/useStore";
 import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
 import {useHistory} from "react-router-dom";
+import {LINKS} from "../../routes/app";
 
 export const Login = observer(() => {
     const store = useStore();
@@ -15,7 +16,7 @@ export const Login = observer(() => {
                 username: params.username,
                 password: params.password,
             });
-            history.push('/app/home');
+            history.push(LINKS.HOME);
         } catch (e) {
             if (e.response?.body?.message) {
                 message.error(e.response.body.message);

src/pages/Membership/Membership.js

@@ -5,6 +5,7 @@ import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
 import {MembershipModal} from "./MembershipModal";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
 
 const {Search} = Input;
 
@@ -88,12 +89,12 @@ export const Membership = observer(() => {
 
   const routeData = [
     {
-      route: "/app/home",
+      route: LINKS.HOME,
       name: "Home",
     },
     {
-      route: "/app/membership",
+      route: LINKS.MEMBERSHIP,
-      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
+      name: <span style={{fontWeight: "bold"}}>Membership</span>,
     },
   ];
 

src/pages/Product/Product.js

@@ -5,6 +5,7 @@ import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {ProductComponent} from "../../component/ProductComponent";
+import {LINKS} from "../../routes/app";
 
 const {TabPane} = Tabs;
 const {Search} = Input;
@@ -35,11 +36,11 @@ export const Product = observer(() => {
 
     const routeData = [
         {
-            route: "/app/home",
+            route: LINKS.HOME,
             name: "Home",
         },
         {
-            route: "/app/product",
+            route: LINKS.PRODUCT,
             name: <span style={{fontWeight: 'bold'}}>Product</span>,
         },
     ];

src/pages/Profile/Profile.js

@@ -0,0 +1,48 @@
+import React from "react";
+import {Button, Card, Col, Input, Row} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons";
+import {LINKS} from "../../routes/app";
+
+const {Search} = Input;
+
+export const Profile = () => {
+    const routeData = [
+        {
+            route: LINKS.HOME,
+            name: "Home",
+        },
+        {
+            route: LINKS.PROFILE,
+            name: <span style={{fontWeight: 'bold'}}>Profile</span>,
+        },
+    ];
+
+    return (
+        <div className={["ppob-container"].join(" ")}>
+            <BreadcumbComponent data={routeData}/>
+            <Card>
+                <Row style={{marginBottom: 20}}>
+                    <Col span={12}>
+                        <Button>
+                            <FilterOutlined/>
+                            Filter
+                        </Button>
+                    </Col>
+                    <Col span={12} style={{textAlign: "right"}}>
+                        <Search
+                            placeholder="input search text"
+                            style={{width: 200, marginRight: 10}}
+                        />
+                        <Button onClick={() => {
+                        }}>
+                            <PlusSquareOutlined/> New
+                        </Button>
+                    </Col>
+                </Row>
+                <div></div>
+            </Card>
+
+        </div>
+    )
+};

src/pages/Transaction/Transaction.js

@@ -3,6 +3,7 @@ import {Button, Card, Col, Input, Row, Tabs} from "antd";
 import {FilterOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {Pulsa} from "./Pulsa";
+import {LINKS} from "../../routes/app";
 
 const {TabPane} = Tabs;
 const {Search} = Input;
@@ -13,11 +14,11 @@ export const Transaction = () => {
   };
   const routeData = [
     {
-      route: "/app/home",
+      route: LINKS.HOME,
       name: "Home",
     },
     {
-      route: "/app/transaction",
+      route: LINKS.TRANSACTION,
       name: <span style={{fontWeight: 'bold'}}>Transaction</span>,
     },
   ];

src/routes/app.js

@@ -4,26 +4,39 @@ import {About} from "../pages/About/About";
 import {Membership} from "../pages/Membership/Membership";
 import {Product} from "../pages/Product/Product";
 import {Transaction} from "../pages/Transaction/Transaction";
+import {Profile} from "../pages/Profile/Profile";
+
+export const LINKS = {
+    HOME: "/app/home",
+    ABOUT: "/app/about",
+    MEMBERSHIP: "/app/membership",
+    PRODUCT: "/app/product",
+    TRANSACTION: "/app/transaction",
+    PROFILE: "/app/profile",
+};
 
 export const AppRoute = () => {
     return <Switch>
-        <Route path={"/app/home"}>
+        <Route path={LINKS.HOME}>
             <Home/>
         </Route>
-        <Route path={"/app/membership"}>
+        <Route path={LINKS.MEMBERSHIP}>
             <Membership/>
         </Route>
-        <Route path={"/app/product"}>
+        <Route path={LINKS.PRODUCT}>
             <Product/>
         </Route>
-        <Route path={"/app/transaction"}>
+        <Route path={LINKS.TRANSACTION}>
             <Transaction/>
         </Route>
-        <Route path={"/app/about"}>
+        <Route path={LINKS.ABOUT}>
             <About/>
         </Route>
+        <Route path={LINKS.PROFILE}>
+            <Profile/>
+        </Route>
         <Route path="/app" exact>
-            <Redirect to={'/app/home'}/>
+            <Redirect to={LINKS.HOME}/>
         </Route>
     </Switch>
 }