Role Access

src/component/ProductComponent.js

@@ -1,5 +1,20 @@
 import React, { useContext, useState } from "react";
-import {Button, Col, Divider, Form, Input, List, message, Modal, Row, Select, Table, Tag, Typography,} from "antd";
+import {
+  Button,
+  Col,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  List,
+  message,
+  Modal,
+  Row,
+  Select,
+  Table,
+  Tag,
+  Typography,
+} from "antd";
 import { observer } from "mobx-react-lite";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { useHistory } from "react-router-dom";
@@ -302,9 +317,7 @@ export const ProductComponent = observer((props) => {
                           <small>{item.product_name}</small> <br />
                           <small>Harga Beli : {item.current_price_price}</small>
                           <br />
-                          <small>
-                            Harga Jual : {item.mark_up_price}
-                          </small>
+                          <small>Harga Jual : {item.mark_up_price}</small>
                         </p>
                         <p></p>
                       </div>
@@ -318,10 +331,14 @@ export const ProductComponent = observer((props) => {
                       }}
                     >
                       <Tag
-                        color={item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
+                        color={
+                          item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
+                        }
                         style={{ color: "#4F566B" }}
                       >
-                        {item?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
+                        {item?.product_status === "ACTIVE"
+                          ? " Tersedia"
+                          : "Tidak"}
                       </Tag>
                     </p>
                   </div>
@@ -367,14 +384,26 @@ export const ProductComponent = observer((props) => {
             label="Price"
             rules={[{ required: true, message: "Please input price!" }]}
           >
-            <Input />
+            <InputNumber
+              style={{ width: "100%" }}
+              formatter={(value) =>
+                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+              }
+              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+            />
           </Form.Item>
           <Form.Item
             name="markUpPrice"
             label="Mark Up Price"
             rules={[{ required: true, message: "Please input mark up price!" }]}
           >
-            <Input />
+            <InputNumber
+              style={{ width: "100%" }}
+              formatter={(value) =>
+                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+              }
+              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+            />
           </Form.Item>
           <Form.Item
             name="code"

src/pages/Membership/DetailUser.js

@@ -125,7 +125,7 @@ export const DetailUser = observer(() => {
         <Row>
           <Col span={24}>
             <div>
-              <Title strong level={3}>History User Transaction</Title>
+              <Title strong level={3}>History Top Up</Title>
 
               <Button style={{marginBottom: '1rem'}} onClick={() => {
                 console.log('clicked filter')

src/pages/Membership/Membership.js

@@ -1,8 +1,24 @@
 import React, { useContext, useEffect, useState } from "react";
-import {Button, Card, Col, Divider, Form, Input, List, message, Modal, Row, Select, Space, Table, Tag,} from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Form,
+  Input,
+  List,
+  message,
+  Modal,
+  Row,
+  Select,
+  Space,
+  Table,
+  Tag,
+  InputNumber
+} from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import {DownloadOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
@@ -212,6 +228,7 @@ export const Membership = observer(() => {
     },
   ];
 
+  if (store.authentication.userData.role !== "Admin") columns.pop();
   const routeData = [
     {
       route: LINKS.HOME,
@@ -385,9 +402,14 @@ export const Membership = observer(() => {
                           <div style={{}}>
                             <p>
                               <small>Role : {item.roleName}</small> <br />
-                              <small>Saldo Supplier : {item.coa.amount}</small>{" "}
+                              <small>
+                                Saldo Supplier : {item.coa.amount}
+                              </small>{" "}
+                              <br />
+                              <small>
+                                Saldo System : {item.coa.amount}
+                              </small>{" "}
                               <br />
-                              <small>Saldo System : {item.coa.amount}</small> <br />
                             </p>
                           </div>
                         }
@@ -461,7 +483,13 @@ export const Membership = observer(() => {
             label="Amount"
             rules={[{ required: true, message: "Please input amount!" }]}
           >
-            <Input />
+            <InputNumber
+              style={{ width: "100%" }}
+              formatter={(value) =>
+                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+              }
+              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
+            />
           </Form.Item>
         </Form>
       </Modal>

src/pages/Product/Product.js

@@ -1,6 +1,10 @@
 import React, { useContext, useEffect } from "react";
 import { Button, Card, Col, Input, message, Row, Upload } from "antd";
-import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
+import {
+  FilterOutlined,
+  PlusSquareOutlined,
+  UploadOutlined,
+} from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -55,15 +59,24 @@ export const Product = observer(() => {
       <Card>
         <Row style={{ marginBottom: 20 }}>
           <Col span={12}>
-            <Button onClick={() => {
-              store.product.visibleModalFilterProduct = true
-            }}>
+            <Button
+              onClick={() => {
+                store.product.visibleModalFilterProduct = true;
+              }}
+            >
               <FilterOutlined />
               Filter
             </Button>
           </Col>
           <Col span={12}>
-            <div style={{display: store.ui.mediaQuery.isMobile? "" :'flex',justifyContent: 'flex-end',textAlign: "right"}}>
+            <div
+              style={{
+                display: store.ui.mediaQuery.isMobile ? "" : "flex",
+                justifyContent: "flex-end",
+                textAlign: "right",
+                //width:store.authentication.userData.role === "Admin" ? 100 : ''
+              }}
+            >
               <Search
                 placeholder="input search text"
                 style={{
@@ -72,18 +85,28 @@ export const Product = observer(() => {
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
               />
+              {store.authentication.userData.role === "Admin" && (
+                <div>
                   <Upload>
-                <Button disabled={store.product.uploadBtnProduct} style={{
-                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-                }} icon={<UploadOutlined/>}>
+                    <Button
+                      disabled={store.product.uploadBtnProduct}
+                      style={{
+                        marginRight: store.ui.mediaQuery.isMobile ? 0 : 0,
+                        marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
+                      }}
+                      icon={<UploadOutlined />}
+                    >
                       Upload Product
                     </Button>
                   </Upload>
-              <Button onClick={() => (store.product.visibleModalProduct = true)}>
+                  <Button
+                    onClick={() => (store.product.visibleModalProduct = true)}
+                  >
                     <PlusSquareOutlined /> New
                   </Button>
                 </div>
+              )}
+            </div>
           </Col>
         </Row>
         <ProductComponent />