Merge branch 'develop' into 'devops-staging'

Develop

See merge request empatnusabangsa/ppob/ppob-frontend!7

src/component/CategoryComponent.js

@@ -139,7 +139,7 @@ export const CategoryComponent = observer((props) => {
           store.category.pageSize = page.pageSize;
           store.category.page = pageNumber - 1;
           modalLoader.setLoading(true);
-          //await store.category.getData();
+          await store.category.getData();
           modalLoader.setLoading(false);
         }}
       />

src/component/CommissionComponent.js

@@ -1,9 +1,8 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useState} from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
+import {Button, Form, Input, message, Modal, Space, Table,} from "antd";
 import {observer} from "mobx-react-lite";
 import {useHistory} from "react-router-dom";
 import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
 import {ModalLoaderContext} from "../utils/modal";
 
 export const CommissionComponent = observer((props) => {
@@ -32,6 +31,7 @@ export const CommissionComponent = observer((props) => {
       title: "Amount",
       dataIndex: "commission",
       key: "commission",
+      render: (text) => <span>{text}%</span>,
     },
     {
       title: "Action",
@@ -82,7 +82,7 @@ export const CommissionComponent = observer((props) => {
           store.commission.pageSize = page.pageSize;
           store.commission.page = pageNumber - 1;
           modalLoader.setLoading(true);
-          //await store.commission.getData();
+          await store.commission.getData();
           modalLoader.setLoading(false);
         }}
       />

src/component/PartnerComponent.js

@@ -211,7 +211,7 @@ export const PartnerComponent = observer((props) => {
             store.partner.pageSize = page.pageSize;
             store.partner.page = pageNumber - 1;
             modalLoader.setLoading(true);
-            //await store.partner.getData();
+            await store.partner.getData();
             modalLoader.setLoading(false);
           }}
         />

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";
@@ -48,11 +63,21 @@ export const ProductComponent = observer((props) => {
       title: "Harga Beli",
       dataIndex: "current_price_price",
       key: "current_price_price",
+      render: (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),
     },
     // {
     //     title: "Gangguan",
@@ -73,10 +98,10 @@ export const ProductComponent = observer((props) => {
       key: "tersedia",
       render: (text, record) => (
         <Tag
-          color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
+          color={record?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
           style={{ color: "#4F566B" }}
         >
-          {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
+          {record?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
         </Tag>
       ),
     },
@@ -84,14 +109,14 @@ export const ProductComponent = observer((props) => {
       title: "Action",
       key: "action",
       render: (text, record) => (
-          <Button
+        <Button
-            onClick={async () => {
+          onClick={async () => {
-              history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+            history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.id));
-              //console.log(record.id)
+            //console.log(record.id)
-            }}
+          }}
-            >
+        >
-              Detail
+          Detail
-            </Button>
+        </Button>
       ),
     },
   ];
@@ -197,12 +222,12 @@ export const ProductComponent = observer((props) => {
 
   const footerLayoutFilter = [
     <Button
-        key={"remove"}
+      key={"remove"}
-        onClick={handleRemoveFilter}
+      onClick={handleRemoveFilter}
-        style={{
+      style={{
-          backgroundColor: "#e74e5e",
+        backgroundColor: "#e74e5e",
-          color: "#fff",
+        color: "#fff",
-        }}
+      }}
     >
       Remove Filter
     </Button>,
@@ -285,16 +310,14 @@ export const ProductComponent = observer((props) => {
                 >
                   <List.Item.Meta
                     className={["cariparkir-container"].join(" ")}
-                    title={item.code}
+                    title={item.product_code}
                     description={
                       <div style={{}}>
                         <p>
-                          <small>Nama Produk : {item.name}</small> <br />
+                          <small>{item.product_name}</small> <br />
-                          <small>Harga Beli : {item.currentPrice.price}</small>
+                          <small>Harga Beli : {item.current_price_price}</small>
                           <br />
-                          <small>
+                          <small>Harga Jual : {item.mark_up_price}</small>
-                            Harga Jual : {item.currentPrice.mark_up_price}
-                          </small>
                         </p>
                         <p></p>
                       </div>
@@ -308,10 +331,14 @@ export const ProductComponent = observer((props) => {
                       }}
                     >
                       <Tag
-                        color={item?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
+                        color={
+                          item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
+                        }
                         style={{ color: "#4F566B" }}
                       >
-                        {item?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
+                        {item?.product_status === "ACTIVE"
+                          ? " Tersedia"
+                          : "Tidak"}
                       </Tag>
                     </p>
                   </div>
@@ -357,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"
@@ -392,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}>
+                <Option value={item.id} key={item.id}>
-                    {item.name}
+                  {item.name}
-                  </Option>
+                </Option>
               ))}
             </Select>
           </Form.Item>
@@ -412,18 +451,18 @@ export const ProductComponent = observer((props) => {
               Filter Supplier
             </Title>
             <Select
-                mode={"multiple"}
+              mode={"multiple"}
-                placeholder="Choose Supplier"
+              placeholder="Choose Supplier"
-                onChange={(val) => {
+              onChange={(val) => {
-                  setFilterSupplier(val);
+                setFilterSupplier(val);
-                }}
+              }}
-                style={{marginBottom: "20px", width: "100%"}}
+              style={{ marginBottom: "20px", width: "100%" }}
-                value={filterSupplier}
+              value={filterSupplier}
             >
               {store.supplier.data.map((item) => (
-                  <Option value={item.id} key={item.id}>
+                <Option value={item.id} key={item.id}>
-                    {item.name}
+                  {item.name}
-                  </Option>
+                </Option>
               ))}
             </Select>
           </Col>
@@ -432,16 +471,16 @@ export const ProductComponent = observer((props) => {
               Filter Categories
             </Title>
             <Select
-                mode={"multiple"}
+              mode={"multiple"}
-                placeholder="Choose Category"
+              placeholder="Choose Category"
-                onChange={async (val) => handleFilterCategory(val)}
+              onChange={async (val) => handleFilterCategory(val)}
-                style={{marginBottom: "20px", width: "100%"}}
+              style={{ marginBottom: "20px", width: "100%" }}
-                value={store.product.filterCategory || []}
+              value={store.product.filterCategory || []}
             >
               {store.category.data.map((item) => (
-                  <Option value={item.id} key={item.id}>
+                <Option value={item.id} key={item.id}>
-                    {item.name}
+                  {item.name}
-                  </Option>
+                </Option>
               ))}
             </Select>
           </Col>
@@ -450,18 +489,18 @@ export const ProductComponent = observer((props) => {
               Filter Sub-Categories
             </Title>
             <Select
-                mode={"multiple"}
+              mode={"multiple"}
-                placeholder="Choose Sub-Category"
+              placeholder="Choose Sub-Category"
-                onChange={(val) => {
+              onChange={(val) => {
-                  setFilterSubCategories(val);
+                setFilterSubCategories(val);
-                }}
+              }}
-                style={{marginBottom: "20px", width: "100%"}}
+              style={{ marginBottom: "20px", width: "100%" }}
-                value={filterSubCategories}
+              value={filterSubCategories}
             >
               {store.product.dataSubCategories.map((item) => (
-                  <Option value={item.id} key={item.id}>
+                <Option value={item.id} key={item.id}>
-                    {item.name}
+                  {item.name}
-                  </Option>
+                </Option>
               ))}
             </Select>
           </Col>

src/component/SubcategoryComponent.js

@@ -1,26 +1,13 @@
-import React, { useContext, useState,useEffect } from "react";
+import React, {useContext, useEffect, useState} from "react";
-import {
+import {Button, Divider, Form, Input, List, message, Modal, Select, Space, Table,} from "antd";
-  Button,
+import {observer} from "mobx-react-lite";
-  Form,
+import {useStore} from "../utils/useStore";
-  Input,
+import {ModalLoaderContext} from "../utils/modal";
-  message,
-  Modal,
-  Select,
-  Space,
-  Table,
-  List,
-  Tag,
-  Divider,
-} from "antd";
-import { observer } from "mobx-react-lite";
-import { useHistory } from "react-router-dom";
-import { useStore } from "../utils/useStore";
-import { ModalLoaderContext } from "../utils/modal";
 
 export const SubcategoryComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const { Option } = Select;
+  const {Option} = Select;
   const [idData, setIdData] = useState("");
   const modalLoader = useContext(ModalLoaderContext);
   useEffect(() => {
@@ -126,7 +113,7 @@ export const SubcategoryComponent = observer((props) => {
             store.subcategory.pageSize = page.pageSize;
             store.subcategory.page = pageNumber - 1;
             modalLoader.setLoading(true);
-            // await getData();
+            await getData();
             modalLoader.setLoading(false);
           }}
         />

src/component/SupplierComponent.js

@@ -219,7 +219,7 @@ export const SupplierComponent = observer((props) => {
             store.supplier.pageSize = page.pageSize;
             store.supplier.page = pageNumber - 1;
             modalLoader.setLoading(true);
-            //await store.supplier.getData();
+            await store.supplier.getData();
             modalLoader.setLoading(false);
           }}
         />

src/component/TopupsaldoModal.js

@@ -1,8 +1,8 @@
-import React, {useContext} from "react";
+import React, { useContext } from "react";
-import {Form, Input, message, Modal} from "antd";
+import { Form, Input, message, Modal, InputNumber } from "antd";
-import {observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
-import {useStore} from "../utils/useStore";
+import { useStore } from "../utils/useStore";
-import {ModalLoaderContext} from "../utils/modal";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const TopupsaldoModal = observer((props) => {
   const store = useStore();
@@ -55,21 +55,27 @@ export const TopupsaldoModal = observer((props) => {
         <Form
           form={form}
           layout="vertical"
-          initialValues={{supplier: store.supplier.code}}
+          initialValues={{ supplier: store.supplier.code }}
         >
           <Form.Item
             name="supplier"
             label="Supplier"
-            rules={[{required: true, message: "Please input supplier!"}]}
+            rules={[{ required: true, message: "Please input supplier!" }]}
           >
-            <Input disabled={true}/>
+            <Input disabled={true} />
           </Form.Item>
           <Form.Item
             name="amount"
             label="Amount"
-            rules={[{required: true, message: "Please input 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/index.css

@@ -63,6 +63,7 @@ code {
 .ant-menu-submenu-arrow{
     padding-right: 40px !important;
 }
+
 .ant-breadcrumb {
     margin-bottom: 10px !important;
 }
@@ -71,3 +72,7 @@ code {
     color: #ed1f24 !important;
     border-color: #ed1f24 !important;
 }
+
+.profile-container .ant-popover-inner-content {
+    padding: 0 !important;
+}

src/pages/App/DesktopLayout.js

@@ -1,64 +1,65 @@
-import React, { useState } from "react";
+import React, {useState} from "react";
-import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
+import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
-import { MenuList } from "./MenuList";
+import {MenuList} from "./MenuList";
-import { Link, useHistory } from "react-router-dom";
+import {Link, useHistory} from "react-router-dom";
 import {
-  HomeOutlined,
+    AlipayOutlined,
-  MenuOutlined,
+    DatabaseOutlined,
-  UserOutlined,
+    FileAddOutlined,
-  ProfileOutlined,
+    FileProtectOutlined,
-  DatabaseOutlined,
+    FileSyncOutlined,
-  FileAddOutlined,
+    HomeOutlined,
-  FileSyncOutlined,
+    LogoutOutlined,
-  FileProtectOutlined,
+    MenuOutlined,
-  ShoppingCartOutlined,
+    PayCircleOutlined,
-  AlipayOutlined,
+    ProfileOutlined,
-  PayCircleOutlined
+    ShoppingCartOutlined,
+    UserOutlined
 } from "@ant-design/icons";
-import { AppRoute, LINKS } from "../../routes/app";
+import {AppRoute, LINKS} from "../../routes/app";
-import { useStore } from "../../utils/useStore";
+import {useStore} from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
+import {observer} from "mobx-react-lite";
-import { useMediaQuery } from "react-responsive";
+import {useMediaQuery} from "react-responsive";
 
-const { Text, Paragraph } = Typography;
+const {Text, Paragraph} = Typography;
-const { Header, Content, Sider } = Layout;
+const {Header, Content, Sider} = Layout;
-const { SubMenu } = Menu;
+const {SubMenu} = Menu;
 
 export const DesktopLayout = observer(() => {
-  let history = useHistory();
+    let history = useHistory();
-  const xl = useMediaQuery({ minWidth: 1024 });
+    const xl = useMediaQuery({minWidth: 1024});
-  const store = useStore();
+    const store = useStore();
-  const [clicked, setClicked] = useState(false);
+    const [clicked, setClicked] = useState(false);
 
-  return (
+    return (
-    <Layout
+        <Layout
-      theme={"light"}
+            theme={"light"}
-      className={"transparent"}
+            className={"transparent"}
-      hasSider={store.ui.mediaQuery.isDesktop}
+            hasSider={store.ui.mediaQuery.isDesktop}
-      style={{
+            style={{
-        paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
+                paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
-        display: "flex",
+                display: "flex",
-        // minWidth: 1024,
+                // minWidth: 1024,
-        width: "100%",
+                width: "100%",
-        height: "100%",
+                height: "100%",
-        position: "relative",
+                position: "relative",
-      }}
+            }}
-    >
-      {store.ui.mediaQuery.isDesktop && (
-        <Sider
-          className={"transparent"}
-          width={240}
-          style={{
-            overflowX: "hidden",
-            bottom: 0,
-            justifyContent: "flex-start",
-            paddingTop: 20,
-            paddingLeft: 20,
-            position: "fixed",
-            top: 0,
-            zIndex: 10,
-          }}
         >
+            {store.ui.mediaQuery.isDesktop && (
+                <Sider
+                    className={"transparent"}
+                    width={240}
+                    style={{
+                        overflowX: "hidden",
+                        bottom: 0,
+                        justifyContent: "flex-start",
+                        paddingTop: 20,
+                        paddingLeft: 20,
+                        position: "fixed",
+                        top: 0,
+                        zIndex: 10,
+                    }}
+                >
           <div
             style={{
               paddingLeft: 20,
@@ -219,9 +220,9 @@ export const DesktopLayout = observer(() => {
                 )}
                 {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="payback-from-user">
-                  <Link to={LINKS.PAYBACKFROMUSER}>
+                  <Link to={LINKS.PAYBACK_FROM_USER}>
-                    <AlipayOutlined />
+                      <AlipayOutlined/>
-                    <span>Payback</span>
+                      <span>Payback</span>
                   </Link>
                 </Menu.Item>
                 )}
@@ -353,41 +354,45 @@ export const DesktopLayout = observer(() => {
                   autoAdjustOverflow={true}
                   placement="bottomRight"
                   content={
-                    <Menu
+                      <Menu
-                      type={"line"}
+                          type={"line"}
-                      inlineIndent={0}
+                          inlineIndent={0}
-                      theme="light"
+                          theme="light"
-                      style={{
+                          style={{
-                        backgroundColor: "transparent",
+                              backgroundColor: "transparent",
-                        borderRightWidth: 0,
+                              borderRightWidth: 0,
-                      }}
+                          }}
-                      mode="inline"
+                          mode="inline"
-                    >
-                      <Menu.Item>
-                        <Link to={LINKS.PROFILE}>
-                          <span>Profile</span>
-                        </Link>
-                      </Menu.Item>
-                      <Menu.Item
-                        onClick={() => {
-                          store.authentication.logout();
-                          history.push("/login");
-                        }}
                       >
-                        <span>Sign out</span>
+                          {store.authentication.userData.role !== "Admin" && <Menu.Item>
-                      </Menu.Item>
+                              <Link to={LINKS.PROFILE}>
-                    </Menu>
+                                  <UserOutlined/>
+                                  <span>Profile</span>
+                              </Link>
+                          </Menu.Item>
+                          }
+                          <Menu.Item
+                              onClick={() => {
+                                  store.authentication.logout();
+                                  history.push("/login");
+                              }}
+                          >
+                              <LogoutOutlined/>
+                              <span>Sign out</span>
+                          </Menu.Item>
+                      </Menu>
                   }
                   title={
-                    <Text>
+                      <Text>
-                      {store.user.data.username}
+                          {store.user.data.username}
-                      <Paragraph
+                          <Paragraph
-                        style={{ fontWeight: 400 }}
+                              style={{fontWeight: 400, marginTop: '0.5rem'}}
-                        type={"secondary-dark"}
+                              type={"secondary-dark"}
-                      >
+                              strong
-                        {store.authentication.userData.username}
+                          >
-                      </Paragraph>
+                              {store.authentication.userData.username}
-                    </Text>
+                          </Paragraph>
+                      </Text>
                   }
                   trigger="click"
                   visible={clicked}
@@ -450,41 +455,45 @@ export const DesktopLayout = observer(() => {
                 autoAdjustOverflow={true}
                 placement="bottomRight"
                 content={
-                  <Menu
+                    <Menu
-                    type={"line"}
+                        type={"line"}
-                    inlineIndent={0}
+                        inlineIndent={0}
-                    theme="light"
+                        theme="light"
-                    style={{
+                        style={{
-                      backgroundColor: "transparent",
+                            backgroundColor: "transparent",
-                      borderRightWidth: 0,
+                            borderRightWidth: 0,
-                    }}
+                        }}
-                    mode="inline"
+                        mode="inline"
-                  >
-                    <Menu.Item key={"profile"}>
-                      <Link to={LINKS.PROFILE}>
-                        <span>Profile</span>
-                      </Link>
-                    </Menu.Item>
-                    <Menu.Item
-                      key={"logout"}
-                      onClick={() => {
-                        store.authentication.logout();
-                        history.push("/login");
-                      }}
                     >
-                      <span>Sign out</span>
+                        {store.authentication.userData.role !== "Admin" && (
-                    </Menu.Item>
+                            <Menu.Item key="profile">
-                  </Menu>
+                                <Link to={LINKS.PROFILE}>
+                                    <UserOutlined/>
+                                    <span>Profile</span>
+                                </Link>
+                            </Menu.Item>
+                        )}
+                        <Menu.Item
+                            key={"logout"}
+                            onClick={() => {
+                                store.authentication.logout();
+                                history.push("/login");
+                            }}
+                        >
+                            <LogoutOutlined/>
+                            <span>Sign out</span>
+                        </Menu.Item>
+                    </Menu>
                 }
                 title={
                   <Text>
-                    {store.user.data.email}{" "}
+                      <Paragraph
-                    <Paragraph
+                          style={{fontWeight: 400, marginTop: '0.5rem'}}
-                      style={{ fontWeight: 400 }}
+                          type={"secondary-dark"}
-                      type={"secondary-dark"}
+                          strong
-                    >
+                      >
-                      {store.authentication.userData.username}
+                          {store.authentication.userData.username}
-                    </Paragraph>
+                      </Paragraph>
                   </Text>
                 }
                 trigger="click"

src/pages/App/MenuList.js

@@ -1,35 +1,36 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
-import { Menu } from "antd";
+import {Menu} from "antd";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
 import {
-  AppstoreOutlined,
+    AlipayOutlined,
-  DatabaseOutlined,
+    AppstoreOutlined,
-  FileAddOutlined,
+    DatabaseOutlined,
-  FileProtectOutlined,
+    FileAddOutlined,
-  FileSyncOutlined,
+    FileProtectOutlined,
-  HomeOutlined,
+    FileSyncOutlined,
-  MenuUnfoldOutlined,
+    HomeOutlined,
-  MoneyCollectOutlined,
+    MenuUnfoldOutlined,
-  ProfileOutlined,
+    MoneyCollectOutlined,
-  ProjectOutlined,
+    PayCircleOutlined,
-  ShoppingCartOutlined,
+    ProfileOutlined,
-  UserOutlined,
+    ProjectOutlined,
-  AlipayOutlined,
+    ShoppingCartOutlined,
-  PayCircleOutlined,
+    UserOutlined,
 } from "@ant-design/icons";
-import { observer } from "mobx-react-lite";
+import {observer} from "mobx-react-lite";
-import { useStore } from "../../utils/useStore";
+import {useStore} from "../../utils/useStore";
-import { LINKS } from "../../routes/app";
+import {LINKS} from "../../routes/app";
 
-const { SubMenu } = Menu;
+const {SubMenu} = Menu;
 
 export const MenuList = observer((props) => {
-  const store = useStore();
+    const store = useStore();
-  useEffect(() => {}, []);
+    useEffect(() => {
+    }, []);
 
-  const [setKeys, setSetKeys] = useState(["dashboard"]);
+    const [setKeys, setSetKeys] = useState(["dashboard"]);
 
-  return (
+    return (
     <Menu
       defaultOpenKeys={["sub4"]}
       theme="light"
@@ -137,10 +138,10 @@ export const MenuList = observer((props) => {
         )}
         {store.authentication.userData.role !== "Admin" && (
           <Menu.Item key="payback-from-user">
-            <Link to={LINKS.PAYBACKFROMUSER}>
+              <Link to={LINKS.PAYBACK_FROM_USER}>
-              <AlipayOutlined />
+                  <AlipayOutlined/>
-              <span>Payback</span>
+                  <span>Payback</span>
-            </Link>
+              </Link>
           </Menu.Item>
         )}
       </SubMenu>

src/pages/Membership/DetailUser.js

@@ -7,12 +7,14 @@ import {observer} from "mobx-react-lite";
 import {FilterOutlined} from "@ant-design/icons";
 import {format, parseISO} from "date-fns";
 import {ModalLoaderContext} from "../../utils/modal";
+import {useParams} from "react-router-dom";
 
 const {Title, Text} = Typography;
 
 export const DetailUser = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const { id } = useParams();
 
   const routeData = [
     {
@@ -20,16 +22,17 @@ export const DetailUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.DETAILUSER,
+      route: LINKS.USER_DETAIL,
       name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
     },
   ];
-
+console.log(id)
   useEffect(() => {
     (async () => {
       modalLoader.setLoading(true);
       await Promise.allSettled([
         store.authentication.getProfile(),
+        store.transaction.getDataHistoryTopUp(id),
         store.transaction.getDataHistoryTransaction(),
       ]);
       modalLoader.setLoading(false);
@@ -83,7 +86,7 @@ export const DetailUser = observer(() => {
                 <Text strong>Name</Text>
               </Col>
               <Col span={12}>
-                <Text>{store.authentication.profileData?.userDetail?.name}</Text>
+                <Text>{store.transaction.data.name}</Text>
               </Col>
               <Col span={12}>
                 <Text strong>Role</Text>
@@ -125,7 +128,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,
+    InputNumber,
+    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 {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons";
 import {MembershipModal} from "./MembershipModal";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
@@ -30,7 +46,6 @@ export const Membership = observer(() => {
 
         await getData();
         await store.role.getData(isAdmin);
-        await store.supplier.getData();
         modalLoader.setLoading(false);
       } catch (e) {
         console.error(e);
@@ -85,10 +100,16 @@ export const Membership = observer(() => {
         };
       }
 
+      let response = null;
+
       (await store.authentication.userData.role) === "Admin"
-        ? store.transaction.distributeAdmin(data)
+        ? (response = await store.transaction.distributeAdmin(data))
-        : store.transaction.distribute(data);
+        : (response = await store.transaction.distribute(data));
-      message.success("Success Top Up");
+
+      response?.body?.statusCode === 200
+        ? message.success("Success Top Up")
+        : message.error("Failed Top Up");
+
       modalLoader.setLoading(false);
       //await store.supplier.getData()
     } catch (e) {
@@ -115,26 +136,15 @@ export const Membership = observer(() => {
       key: "role",
     },
     {
-      title: "Saldo di Supplier",
+      title: "Saldo",
       dataIndex: ["coa", "amount"],
       key: ["coa", "amount"],
       width: "20%",
       render: (text) =>
-        new Intl.NumberFormat("id-ID", {
+          new Intl.NumberFormat("id-ID", {
-          style: "currency",
+            style: "currency",
-          currency: "IDR",
+            currency: "IDR",
-        }).format(text),
+          }).format(text),
-    },
-    {
-      title: "Saldo di System",
-      dataIndex: ["coa_undistribute", "amount"],
-      key: ["coa_undistribute", "amount"],
-      width: "20%",
-      render: (text) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(text),
     },
     {
       title: "Status",
@@ -201,8 +211,9 @@ export const Membership = observer(() => {
           </Button>
           <Button
             onClick={async () => {
-              history.push(LINKS.DETAILUSER.replace(":id", record.id));
+                await store.transaction.getDataHistoryTopUp(record.id)
-              //console.log(record.id)
+                history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+                console.log(record.id);
             }}
           >
             Detail
@@ -212,6 +223,7 @@ export const Membership = observer(() => {
     },
   ];
 
+  if (store.authentication.userData.role !== "Admin") columns.pop();
   const routeData = [
     {
       route: LINKS.HOME,
@@ -265,29 +277,6 @@ export const Membership = observer(() => {
     }
   };
 
-  const handleDetail = (record) => {
-    // Modal.confirm({
-    //   title: "Are you sure delete this record?",
-    //   icon: <ExclamationCircleOutlined/>,
-    //   okText: "Yes",
-    //   okType: "primary",
-    //   cancelText: "Cancel",
-    //   async onOk() {
-    //     try {
-    //       //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
-    //       await store.membership.delete(record);
-    //       message.success("Success Delete Data");
-    //       await getData();
-    //     } catch (e) {
-    //       message.error("Failed Delete Data");
-    //     }
-    //   },
-    //   onCancel() {
-    //     console.log("Cancel");
-    //   },
-    // });
-  };
-
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -385,9 +374,14 @@ export const Membership = observer(() => {
                           <div style={{}}>
                             <p>
                               <small>Role : {item.roleName}</small> <br />
-                              <small>Saldo Supplier : {item.amount}</small>{" "}
+                              <small>
+                                Saldo Supplier : {item.coa.amount}
+                              </small>{" "}
+                              <br />
+                              <small>
+                                Saldo System : {item.coa.amount}
+                              </small>{" "}
                               <br />
-                              <small>Saldo System : {item.amount}</small> <br />
                             </p>
                           </div>
                         }
@@ -443,25 +437,18 @@ export const Membership = observer(() => {
         }}
       >
         <Form form={form} layout="vertical">
-          <Form.Item
-            name="supplier"
-            label="Supplier"
-            rules={[{ required: true, message: "Please input supplier!" }]}
-          >
-            <Select placeholder="Select Code Supplier" allowClear>
-              {store.supplier.data.map((item) => (
-                <Option value={item.code} key={item.code}>
-                  {item.code}
-                </Option>
-              ))}
-            </Select>
-          </Form.Item>
           <Form.Item
             name="amount"
             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/Payback/Payback.js

@@ -6,6 +6,7 @@ import {CheckCircleOutlined, CloseOutlined, FilterOutlined,} from "@ant-design/i
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
 import {ModalLoaderContext} from "../../utils/modal";
+import {appConfig} from "../../config/app";
 
 const {Search} = Input;
 
@@ -39,43 +40,49 @@ export const Payback = observer(() => {
       dataIndex: "image_prove",
       key: "image_prove",
       render: (text, record) => (
-        <Image
+          <Image
-          src={record.picture}
+              src={`${appConfig.apiUrl}/config/image/${text}`}
-          style={{width: 50, height: 50}}
+              style={{width: '5vw'}}
-          shape="circle"
+              alt={record.id}
-          alt="avatar"
+          />
-        />
       ),
     },
     {
-      title: "Amount",
+        title: "Amount",
-      dataIndex: "amount",
+        dataIndex: "amount",
-      key: "amount",
+        key: "amount",
+        width: '20%',
+        render: (text) =>
+            new Intl.NumberFormat("id-ID", {
+                style: "currency",
+                currency: "IDR",
+            }).format(text),
     },
-    {
+      {
-      title: "Action",
+          title: "Action",
-      dataIndex: "amount",
+          dataIndex: "amount",
-      key: "action",
+          key: "action",
-      render: (text, record) => (
+          width: '10%',
-          <Space size="middle">
+          render: (text, record) => (
-            <Button
+              <Space size="middle">
-                onClick={async () => {
+                  <Button
-                  await handleAction(record, "accept");
+                      onClick={async () => {
-                }}
+                          await handleAction(record, "accept");
-                icon={<CheckCircleOutlined/>}
+                      }}
-                style={{
+                      icon={<CheckCircleOutlined/>}
-                  backgroundColor: "#1bb91d",
+                      style={{
-                  color: "#fff",
+                          backgroundColor: "#1bb91d",
-                  borderColor: "#1bb91d",
+                          color: "#fff",
-                }}
+                          borderColor: "#1bb91d",
-            >
+                      }}
-              Accept
+                  >
-            </Button>
+                      Accept
-            <Button
+                  </Button>
-                onClick={async () => {
+                  <Button
-                  await handleAction(record, "reject");
+                      onClick={async () => {
-                }}
+                          await handleAction(record, "reject");
-                icon={<CloseOutlined/>}
+                      }}
+                      icon={<CloseOutlined/>}
                 style={{
                   backgroundColor: "#ff1c1c",
                   color: "#fff",

src/pages/Payback/PaybackFromUser.js

@@ -56,6 +56,11 @@ export const PaybackFromUser = observer(() => {
       title: "Amount",
       dataIndex: "amount",
       key: "amount",
+      render: (text) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
   ];
 
@@ -65,7 +70,7 @@ export const PaybackFromUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.PAYBACKFROMUSER,
+      route: LINKS.PAYBACK_FROM_USER,
       name: <span style={{fontWeight: "bold"}}>Payback User</span>,
     },
   ];

src/pages/Payback/PaybackModal.js

@@ -12,7 +12,7 @@ export const PaybackModal = ({initialData}) => {
   const [image, setImage] = useState("");
   const [fileList, setFileList] = useState([]);
   const [previewImage, setPreviewImage] = useState("");
-  const [previewVisible, setPreviewVisible] = useState(false);
+  const [responseFilename, setResponseFilename] = useState("");
   const [loading, setLoading] = useState(false);
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -34,20 +34,23 @@ export const PaybackModal = ({initialData}) => {
     const file = args.file;
     const res = await http.upload(file);
     setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
+    setResponseFilename(res.body.filename);
     setFileList([{
       uid: '-1',
-      name: 'image',
+      name: res.body.filename,
       status: 'done',
       url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
     }]);
+    setLoading(false);
   };
 
   const handleChange = (info) => {
+    console.log(info, "apa isi onchange")
     if (info.file.status === 'uploading') {
       setLoading(true);
-      return;
+    } else {
+      setLoading(false)
     }
-    setLoading(false)
   };
 
   const uploadButton = (
@@ -62,7 +65,8 @@ export const PaybackModal = ({initialData}) => {
     try {
       const request = {
         ...data,
-        destination: store.authentication.profileData.superior?.id
+        destination: store.authentication.profileData.superior?.id,
+        image_prove: responseFilename
       }
       await store.payback.create(request);
       message.success("Success Add Payback");
@@ -74,21 +78,21 @@ export const PaybackModal = ({initialData}) => {
       message.error(e.message);
     }
     modalLoader.setLoading(false);
-    form.resetFields();
     store.payback.visibleModalPayback = false;
+    form.resetFields();
     setImage("");
     setFileList([]);
     setPreviewImage("");
-    setPreviewVisible(false);
+    setResponseFilename("");
   };
 
   const handleCancel = () => {
     form.resetFields();
-    store.payback.visibleModalPayback = false;
     setImage("");
     setFileList([]);
     setPreviewImage("");
-    setPreviewVisible(false);
+    setResponseFilename("");
+    store.payback.visibleModalPayback = false;
   }
 
   return (
@@ -126,7 +130,6 @@ export const PaybackModal = ({initialData}) => {
                   fileList={fileList}
                   onPreview={(file) => {
                     setPreviewImage(file.url || file.filename);
-                    setPreviewVisible(file.url || file.filename);
                   }}
                   showUploadList={true}
                   onChange={handleChange}

src/pages/Product/Product.js

@@ -1,14 +1,18 @@
-import React, {useContext, useEffect} from "react";
+import React, { useContext, useEffect } from "react";
-import {Button, Card, Col, Input, message, Row, Upload} from "antd";
+import { Button, Card, Col, Input, message, Row, Upload } from "antd";
-import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
+import {
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+  FilterOutlined,
-import {useStore} from "../../utils/useStore";
+  PlusSquareOutlined,
-import {observer} from "mobx-react-lite";
+  UploadOutlined,
-import {ProductComponent} from "../../component/ProductComponent";
+} from "@ant-design/icons";
-import {LINKS} from "../../routes/app";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import {ModalLoaderContext} from "../../utils/modal";
+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,64 @@ 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={() => {
+            <Button
-              store.product.visibleModalFilterProduct = true
+              onClick={() => {
-            }}>
+                store.product.visibleModalFilterProduct = true;
-              <FilterOutlined/>
+              }}
+            >
+              <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",
+              }}
+            >
               <Search
-                  placeholder="input search text"
+                placeholder="input search text"
-                  style={{
+                style={{
-                    width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                  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={{
                   marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-                }} icon={<UploadOutlined/>}>
+                }}
-                  Upload Product
+              />
-                </Button>
+              {store.authentication.userData.role === "Admin" && (
-              </Upload>
+                <div
-              <Button onClick={() => (store.product.visibleModalProduct = true)}>
+                  style={{
-                <PlusSquareOutlined/> New
+                    display: store.ui.mediaQuery.isMobile ? "" : "flex",
-              </Button>
+                    justifyContent: "flex-end",
+                    textAlign: "right",
+                  }}
+                >
+                  <Upload>
+                    <Button
+                      disabled={store.product.uploadBtnProduct}
+                      style={{
+                        marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                        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>
   );

src/pages/Product/ProductDetail.js

@@ -10,7 +10,7 @@ import {ModalLoaderContext} from "../../utils/modal";
 
 const {Title, Text} = Typography;
 
-export const DetailProduct = observer(() => {
+export const ProductDetail = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -20,8 +20,12 @@ export const DetailProduct = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.DETAILPRODUCT,
+      route: LINKS.PRODUCT,
-      name: <span style={{fontWeight: 'bold'}}>Detail Product</span>,
+      name: <span style={{fontWeight: "bold"}}>Product</span>,
+    },
+    {
+      route: LINKS.PRODUCT_DETAIL,
+      name: <span style={{fontWeight: 'bold'}}>Product Detail</span>,
     },
   ];
 
@@ -75,7 +79,7 @@ export const DetailProduct = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData}/>
       <Card>
-        <Title strong>Detail Product</Title>
+        <Title strong>Product Detail</Title>
         <Row style={{marginBottom: 20}}>
           <Col lg={12} xs={24}>
             <Row>

src/pages/Product/Subcategory.js

@@ -1,11 +1,11 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Input, Row,message} from "antd";
+import {Button, Card, Col, Input, message, Row} from "antd";
 import {PlusSquareOutlined} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {LINKS} from "../../routes/app";
-import {SubcategoryComponent} from "../../component/Subcategory";
+import {SubcategoryComponent} from "../../component/SubcategoryComponent";
 import {ModalLoaderContext} from "../../utils/modal";
 
 const {Search} = Input;

src/pages/Profile/Profile.js

@@ -42,6 +42,11 @@ export const Profile = observer(() => {
       dataIndex: 'mark_up_price',
       key: 'mark_up_price',
       width: '20%',
+      render: (text) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: 'Name',

src/routes/app.js

@@ -4,7 +4,7 @@ import {About} from "../pages/About/About";
 import {Membership} from "../pages/Membership/Membership";
 import {DetailUser} from "../pages/Membership/DetailUser";
 import {Product} from "../pages/Product/Product";
-import {DetailProduct} from "../pages/Product/DetailProduct";
+import {ProductDetail} from "../pages/Product/ProductDetail";
 import {Transaction} from "../pages/Transaction/Transaction";
 import {Profile} from "../pages/Profile/Profile";
 import {Commission} from "../pages/Config/Commission";
@@ -27,10 +27,10 @@ export const LINKS = {
     SUPPLIER: "/app/supplier",
     CATEGORY: "/app/category",
     PAYBACK: "/app/payback",
-    PAYBACKFROMUSER: "/app/payback-from-user",
+    PAYBACK_FROM_USER: "/app/payback-from-user",
     SUBCATEGORY: "/app/subcategory",
-    DETAILUSER: "/app/detail-user",
+    USER_DETAIL: "/app/user-detail",
-    DETAILPRODUCT: "/app/detail-product",
+    PRODUCT_DETAIL: "/app/product-detail",
 };
 
 export const AppRoute = () => {
@@ -38,16 +38,16 @@ export const AppRoute = () => {
         <Route path={LINKS.HOME}>
             <Home/>
         </Route>
-        <Route path={LINKS.DETAILUSER}>
+        <Route path={LINKS.USER_DETAIL}>
             <DetailUser/>
         </Route>
-        <Route path={LINKS.DETAILPRODUCT}>
+        <Route path={LINKS.PRODUCT_DETAIL}>
-            <DetailProduct/>
+            <ProductDetail/>
         </Route>
         <Route path={LINKS.COMMISSION}>
             <Commission/>
         </Route>
-        <Route path={LINKS.PAYBACKFROMUSER}>
+        <Route path={LINKS.PAYBACK_FROM_USER}>
             <PaybackFromUser/>
         </Route>
         <Route path={LINKS.CATEGORY}>

src/store/product.js

@@ -31,6 +31,7 @@ export class Product {
     async getData() {
         try {
             const response = await http.get(`/product/all?supplier=${this.filterSupplier}&sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
+            //console.log(response)
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 return item

src/store/transaction.js

@@ -22,10 +22,14 @@ export class Transaction {
     filterSubCategory = null;
 
     pageHistoryTransaction = 0;
+    pageHistoryTopUp = 0;
     // pageSizeHistoryTransaction = 10
     dataHistoryTransaction = [];
     total_dataHistoryTransaction = 0;
 
+    dataHistoryTopUp=[];
+    total_dataHistoryTopUp = 0;
+    
     constructor(ctx) {
         this.ctx = ctx;
         makeAutoObservable(this);
@@ -76,6 +80,18 @@ export class Transaction {
         }
     }
 
+    async getDataHistoryTopUp(id) {
+        try {
+            console.log("Top up")
+            const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
+            
+            this.dataHistoryTopUp = response.body.data ?? []
+            this.total_dataHistoryTopUp = response?.body?.count ?? 0
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     async create(data) {
         try {
             const response = await http.post('/product').send(data);