From 537e009380c55fab8181bdfb75d285de7e36aa22 Mon Sep 17 00:00:00 2001
From: caturbgs <savemeplease11>
Date: Fri, 10 Dec 2021 14:54:25 +0700
Subject: [PATCH 1/3] feat: const for routes and init profile page

---
 src/component/ProductComponent.js    |  3 +-
 src/pages/App/DesktopLayout.js       | 42 ++++++++++++++++------------
 src/pages/App/MenuList.js            | 19 +++++++++----
 src/pages/Login/Login.js             |  3 +-
 src/pages/Membership/Membership.js   |  7 +++--
 src/pages/Product/Product.js         |  5 ++--
 src/pages/Transaction/Transaction.js |  5 ++--
 src/routes/app.js                    | 24 ++++++++++++----
 8 files changed, 69 insertions(+), 39 deletions(-)

diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index a61d8ca..e139217 100644
--- a/src/component/ProductComponent.js
+++ b/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");
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index 1c46dc5..77d14f3 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/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 {AppRoute} from "../../routes/app";
+import {HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
+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">
-                                <Link to={'/app/membership'}>
+                            {store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
+                                <Link to={LINKS.MEMBERSHIP}>
                                     <HomeOutlined/>
                                     <span>Membership</span>
                                 </Link>
-                            </Menu.Item>
-                            <Menu.Item key="product">
-                                <Link to={'/app/product'}>
+                            </Menu.Item>}
+                            {store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
+                                <Link to={LINKS.PRODUCT}>
                                     <HomeOutlined/>
                                     <span>Product</span>
                                 </Link>
-                            </Menu.Item>
-                            <Menu.Item key="transaction">
-                                <Link to={'/app/transaction'}>
+                            </Menu.Item>}
+                            {store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
+                                <Link to={LINKS.TRANSACTION}>
                                     <HomeOutlined/>
                                     <span>Transaction</span>
                                 </Link>
-                            </Menu.Item>
-                            <Menu.Item key="about">
-                                <Link to={'/app/about'}>
-                                    <CalendarOutlined/>
-                                    <span>About</span>
+                            </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/>*/}
+                            {/*        <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>
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index 8068ac5..8c7f184 100644
--- a/src/pages/App/MenuList.js
+++ b/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/>*/}
diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
index 14f1e6f..a55531b 100644
--- a/src/pages/Login/Login.js
+++ b/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);
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index df36bd5..99bfe5e 100644
--- a/src/pages/Membership/Membership.js
+++ b/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;
 
@@ -84,12 +85,12 @@ export const Membership = observer(() => {
 
   const routeData = [
     {
-      route: "/app/home",
+      route: LINKS.HOME,
       name: "Home",
     },
     {
-      route: "/app/membership",
-      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
+      route: LINKS.MEMBERSHIP,
+      name: <span style={{fontWeight: "bold"}}>Membership</span>,
     },
   ];
 
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 594374b..146a475 100644
--- a/src/pages/Product/Product.js
+++ b/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>,
         },
     ];
diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js
index 9d42dfe..5d5e506 100644
--- a/src/pages/Transaction/Transaction.js
+++ b/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>,
     },
   ];
diff --git a/src/routes/app.js b/src/routes/app.js
index efb720d..bada08d 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -5,25 +5,37 @@ import {Membership} from "../pages/Membership/Membership";
 import {Product} from "../pages/Product/Product";
 import {Transaction} from "../pages/Transaction/Transaction";
 
+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}>
             <About/>
         </Route>
         <Route path="/app" exact>
-            <Redirect to={'/app/home'}/>
+            <Redirect to={LINKS.HOME}/>
         </Route>
     </Switch>
 }

From c8faca652df4b377a6f6e4fcfef0271c86725c6c Mon Sep 17 00:00:00 2001
From: caturbgs <savemeplease11>
Date: Fri, 10 Dec 2021 14:58:01 +0700
Subject: [PATCH 2/3] feat: config for transaction role

---
 src/pages/App/MenuList.js    |  2 +-
 src/pages/Profile/Profile.js | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Profile/Profile.js

diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index 8c7f184..5a79b91 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -52,7 +52,7 @@ export const MenuList = observer((props) => {
 					<span>Product</span>
 				</Link>
 			</Menu.Item>}
-			{store.authentication.userData.role === ('Supervisor' || 'Sales') && <Menu.Item key="transaction">
+			{store.authentication.userData.role === ('Retail' || 'Admin') && <Menu.Item key="transaction">
 				<Link to={LINKS.TRANSACTION}>
 					<HomeOutlined/>
 					<span>Transaction</span>
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
new file mode 100644
index 0000000..1b3baea
--- /dev/null
+++ b/src/pages/Profile/Profile.js
@@ -0,0 +1,24 @@
+import React from "react";
+import {PageHeader} from "antd";
+
+export const Profile = () => {
+    return (
+        <div className={["ppob-container"].join(" ")}>
+            <PageHeader
+                style={{
+                    padding: 0,
+                    margin: 0,
+                    height: 40,
+                    backgroundColor: "transparent",
+                }}
+                title={"Profile"}
+            >
+            </PageHeader>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur
+            corporis,
+            eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos
+            impedit
+            rem tempora!
+        </div>
+    )
+};

From ed278b61fc42383bd73e2869d2cd81fa1df60dd5 Mon Sep 17 00:00:00 2001
From: caturbgs <savemeplease11>
Date: Fri, 10 Dec 2021 15:02:44 +0700
Subject: [PATCH 3/3] feat: init profile page layout

---
 src/pages/Profile/Profile.js | 56 +++++++++++++++++++++++++-----------
 src/routes/app.js            |  3 +-
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 1b3baea..8aaa140 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -1,24 +1,48 @@
 import React from "react";
-import {PageHeader} from "antd";
+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(" ")}>
-            <PageHeader
-                style={{
-                    padding: 0,
-                    margin: 0,
-                    height: 40,
-                    backgroundColor: "transparent",
-                }}
-                title={"Profile"}
-            >
-            </PageHeader>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur
-            corporis,
-            eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos
-            impedit
-            rem tempora!
+            <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>
     )
 };
diff --git a/src/routes/app.js b/src/routes/app.js
index bada08d..414bc9e 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -4,6 +4,7 @@ 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",
@@ -32,7 +33,7 @@ export const AppRoute = () => {
             <About/>
         </Route>
         <Route path={LINKS.PROFILE}>
-            <About/>
+            <Profile/>
         </Route>
         <Route path="/app" exact>
             <Redirect to={LINKS.HOME}/>