From 78626fd6e949e30fa329585debf80d26187791e2 Mon Sep 17 00:00:00 2001
From: "ajat91.sudrajat" <ajat91.sudrajat@gmail.com>
Date: Wed, 22 Dec 2021 17:52:05 +0700
Subject: [PATCH] Role Access

---
 src/component/ProductComponent.js  | 169 +++++++++++++++++------------
 src/pages/Membership/DetailUser.js |   2 +-
 src/pages/Membership/Membership.js |  58 +++++++---
 src/pages/Product/Product.js       |  89 +++++++++------
 4 files changed, 199 insertions(+), 119 deletions(-)

diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index fcd3c2f..36f9042 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -1,18 +1,33 @@
-import React, {useContext, useState} from "react";
-import {Button, Col, Divider, Form, Input, 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";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useState } from "react";
+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";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { ModalLoaderContext } from "../utils/modal";
 
-const {Title, Text} = Typography;
+const { Title, Text } = Typography;
 
 export const ProductComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const {Option} = Select;
+  const { Option } = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
   const [filterSupplier, setFilterSupplier] = useState([]);
@@ -49,20 +64,20 @@ export const ProductComponent = observer((props) => {
       dataIndex: "current_price_price",
       key: "current_price_price",
       render: (text) =>
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text),
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
       title: "Harga Jual",
       dataIndex: "mark_up_price",
       key: "mark_up_price",
       render: (text) =>
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text),
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     // {
     //     title: "Gangguan",
@@ -94,14 +109,14 @@ export const ProductComponent = observer((props) => {
       title: "Action",
       key: "action",
       render: (text, record) => (
-          <Button
-            onClick={async () => {
-              history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
-              //console.log(record.id)
-            }}
-            >
-              Detail
-            </Button>
+        <Button
+          onClick={async () => {
+            history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+            //console.log(record.id)
+          }}
+        >
+          Detail
+        </Button>
       ),
     },
   ];
@@ -207,12 +222,12 @@ export const ProductComponent = observer((props) => {
 
   const footerLayoutFilter = [
     <Button
-        key={"remove"}
-        onClick={handleRemoveFilter}
-        style={{
-          backgroundColor: "#e74e5e",
-          color: "#fff",
-        }}
+      key={"remove"}
+      onClick={handleRemoveFilter}
+      style={{
+        backgroundColor: "#e74e5e",
+        color: "#fff",
+      }}
     >
       Remove Filter
     </Button>,
@@ -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"
@@ -402,9 +431,9 @@ export const ProductComponent = observer((props) => {
           >
             <Select placeholder="Select Sub Category" allowClear>
               {store.category.dataSubCategories.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
               ))}
             </Select>
           </Form.Item>
@@ -422,18 +451,18 @@ export const ProductComponent = observer((props) => {
               Filter Supplier
             </Title>
             <Select
-                mode={"multiple"}
-                placeholder="Choose Supplier"
-                onChange={(val) => {
-                  setFilterSupplier(val);
-                }}
-                style={{marginBottom: "20px", width: "100%"}}
-                value={filterSupplier}
+              mode={"multiple"}
+              placeholder="Choose Supplier"
+              onChange={(val) => {
+                setFilterSupplier(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterSupplier}
             >
               {store.supplier.data.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
               ))}
             </Select>
           </Col>
@@ -442,16 +471,16 @@ export const ProductComponent = observer((props) => {
               Filter Categories
             </Title>
             <Select
-                mode={"multiple"}
-                placeholder="Choose Category"
-                onChange={async (val) => handleFilterCategory(val)}
-                style={{marginBottom: "20px", width: "100%"}}
-                value={store.product.filterCategory || []}
+              mode={"multiple"}
+              placeholder="Choose Category"
+              onChange={async (val) => handleFilterCategory(val)}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={store.product.filterCategory || []}
             >
               {store.category.data.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
               ))}
             </Select>
           </Col>
@@ -460,18 +489,18 @@ export const ProductComponent = observer((props) => {
               Filter Sub-Categories
             </Title>
             <Select
-                mode={"multiple"}
-                placeholder="Choose Sub-Category"
-                onChange={(val) => {
-                  setFilterSubCategories(val);
-                }}
-                style={{marginBottom: "20px", width: "100%"}}
-                value={filterSubCategories}
+              mode={"multiple"}
+              placeholder="Choose Sub-Category"
+              onChange={(val) => {
+                setFilterSubCategories(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterSubCategories}
             >
               {store.product.dataSubCategories.map((item) => (
-                  <Option value={item.id} key={item.id}>
-                    {item.name}
-                  </Option>
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
               ))}
             </Select>
           </Col>
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index fe5bfdc..d2649d0 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/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')
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index ab473cf..887861b 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -1,16 +1,32 @@
-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 {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {DownloadOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-import {MembershipModal} from "./MembershipModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
-import {useHistory} from "react-router-dom";
-import {ModalLoaderContext} from "../../utils/modal";
+import React, { useContext, useEffect, useState } from "react";
+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 { MembershipModal } from "./MembershipModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+import { useHistory } from "react-router-dom";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
-const {Option} = Select;
+const { Search } = Input;
+const { Option } = Select;
 export const Membership = observer(() => {
   const history = useHistory();
   const [form] = Form.useForm();
@@ -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>
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 95f4c34..6b58872 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -1,14 +1,18 @@
-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 {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";
-import {ModalLoaderContext} from "../../utils/modal";
+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 { 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";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Product = observer(() => {
   const store = useStore();
@@ -53,40 +57,59 @@ export const Product = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
-        <Row style={{marginBottom: 20}}>
+        <Row style={{ marginBottom: 20 }}>
           <Col span={12}>
-            <Button onClick={() => {
-              store.product.visibleModalFilterProduct = true
-            }}>
-              <FilterOutlined/>
+            <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={{
-                    width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                    marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                    marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-                  }}
-              />
-              <Upload>
-                <Button disabled={store.product.uploadBtnProduct} style={{
+                placeholder="input search text"
+                style={{
+                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
                   marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-                }} icon={<UploadOutlined/>}>
-                  Upload Product
-                </Button>
-              </Upload>
-              <Button onClick={() => (store.product.visibleModalProduct = true)}>
-                <PlusSquareOutlined/> New
-              </Button>
+                }}
+              />
+              {store.authentication.userData.role === "Admin" && (
+                <div>
+                  <Upload>
+                    <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)}
+                  >
+                    <PlusSquareOutlined /> New
+                  </Button>
+                </div>
+              )}
             </div>
           </Col>
         </Row>
-        <ProductComponent/>
+        <ProductComponent />
       </Card>
     </div>
   );