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>
       ),
     },
@@ -86,7 +111,7 @@ export const ProductComponent = observer((props) => {
       render: (text, record) => (
         <Button
           onClick={async () => {
-              history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+            history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.id));
             //console.log(record.id)
           }}
         >
@@ -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"

src/component/SubcategoryComponent.js

@@ -1,19 +1,6 @@
-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,
-  Form,
-  Input,
-  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";
 
@@ -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,5 +1,5 @@
 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 { useStore } from "../utils/useStore";
 import { ModalLoaderContext } from "../utils/modal";
@@ -69,7 +69,13 @@ export const TopupsaldoModal = observer((props) => {
             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/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

@@ -3,17 +3,18 @@ import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
 import {MenuList} from "./MenuList";
 import {Link, useHistory} from "react-router-dom";
 import {
-  HomeOutlined,
+    AlipayOutlined,
-  MenuOutlined,
-  UserOutlined,
-  ProfileOutlined,
     DatabaseOutlined,
     FileAddOutlined,
-  FileSyncOutlined,
     FileProtectOutlined,
+    FileSyncOutlined,
+    HomeOutlined,
+    LogoutOutlined,
+    MenuOutlined,
+    PayCircleOutlined,
+    ProfileOutlined,
     ShoppingCartOutlined,
-  AlipayOutlined,
+    UserOutlined
-  PayCircleOutlined
 } from "@ant-design/icons";
 import {AppRoute, LINKS} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
@@ -219,7 +220,7 @@ 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/>
                       <span>Payback</span>
                   </Link>
@@ -363,17 +364,20 @@ export const DesktopLayout = observer(() => {
                           }}
                           mode="inline"
                       >
-                      <Menu.Item>
+                          {store.authentication.userData.role !== "Admin" && <Menu.Item>
                               <Link to={LINKS.PROFILE}>
+                                  <UserOutlined/>
                                   <span>Profile</span>
                               </Link>
                           </Menu.Item>
+                          }
                           <Menu.Item
                               onClick={() => {
                                   store.authentication.logout();
                                   history.push("/login");
                               }}
                           >
+                              <LogoutOutlined/>
                               <span>Sign out</span>
                           </Menu.Item>
                       </Menu>
@@ -382,8 +386,9 @@ export const DesktopLayout = observer(() => {
                       <Text>
                           {store.user.data.username}
                           <Paragraph
-                        style={{ fontWeight: 400 }}
+                              style={{fontWeight: 400, marginTop: '0.5rem'}}
                               type={"secondary-dark"}
+                              strong
                           >
                               {store.authentication.userData.username}
                           </Paragraph>
@@ -460,11 +465,14 @@ export const DesktopLayout = observer(() => {
                         }}
                         mode="inline"
                     >
-                    <Menu.Item key={"profile"}>
+                        {store.authentication.userData.role !== "Admin" && (
+                            <Menu.Item key="profile">
                                 <Link to={LINKS.PROFILE}>
+                                    <UserOutlined/>
                                     <span>Profile</span>
                                 </Link>
                             </Menu.Item>
+                        )}
                         <Menu.Item
                             key={"logout"}
                             onClick={() => {
@@ -472,16 +480,17 @@ export const DesktopLayout = observer(() => {
                                 history.push("/login");
                             }}
                         >
+                            <LogoutOutlined/>
                             <span>Sign out</span>
                         </Menu.Item>
                     </Menu>
                 }
                 title={
                   <Text>
-                    {store.user.data.email}{" "}
                       <Paragraph
-                      style={{ fontWeight: 400 }}
+                          style={{fontWeight: 400, marginTop: '0.5rem'}}
                           type={"secondary-dark"}
+                          strong
                       >
                           {store.authentication.userData.username}
                       </Paragraph>

src/pages/App/MenuList.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import {Menu} from "antd";
 import {Link} from "react-router-dom";
 import {
+    AlipayOutlined,
     AppstoreOutlined,
     DatabaseOutlined,
     FileAddOutlined,
@@ -10,12 +11,11 @@ import {
     HomeOutlined,
     MenuUnfoldOutlined,
     MoneyCollectOutlined,
+    PayCircleOutlined,
     ProfileOutlined,
     ProjectOutlined,
     ShoppingCartOutlined,
     UserOutlined,
-  AlipayOutlined,
-  PayCircleOutlined,
 } from "@ant-design/icons";
 import {observer} from "mobx-react-lite";
 import {useStore} from "../../utils/useStore";
@@ -25,7 +25,8 @@ const { SubMenu } = Menu;
 
 export const MenuList = observer((props) => {
     const store = useStore();
-  useEffect(() => {}, []);
+    useEffect(() => {
+    }, []);
 
     const [setKeys, setSetKeys] = useState(["dashboard"]);
 
@@ -137,7 +138,7 @@ 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/>
                   <span>Payback</span>
               </Link>

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,7 +136,7 @@ export const Membership = observer(() => {
       key: "role",
     },
     {
-      title: "Saldo di Supplier",
+      title: "Saldo",
       dataIndex: ["coa", "amount"],
       key: ["coa", "amount"],
       width: "20%",
@@ -125,17 +146,6 @@ export const Membership = observer(() => {
             currency: "IDR",
           }).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",
       dataIndex: "isActive",
@@ -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;
 
@@ -40,10 +41,9 @@ export const Payback = observer(() => {
       key: "image_prove",
       render: (text, record) => (
           <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"
           />
       ),
     },
@@ -51,11 +51,18 @@ export const Payback = observer(() => {
         title: "Amount",
         dataIndex: "amount",
         key: "amount",
+        width: '20%',
+        render: (text) =>
+            new Intl.NumberFormat("id-ID", {
+                style: "currency",
+                currency: "IDR",
+            }).format(text),
     },
       {
           title: "Action",
           dataIndex: "amount",
           key: "action",
+          width: '10%',
           render: (text, record) => (
               <Space size="middle">
                   <Button

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)
+    }
   };
 
   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,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,23 @@ export const Product = observer(() => {
       <Card>
         <Row style={{ marginBottom: 20 }}>
           <Col span={12}>
-            <Button onClick={() => {
+            <Button
-              store.product.visibleModalFilterProduct = true
+              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",
+              }}
+            >
               <Search
                 placeholder="input search text"
                 style={{
@@ -72,18 +84,34 @@ export const Product = observer(() => {
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
               />
+              {store.authentication.userData.role === "Admin" && (
+                <div
+                  style={{
+                    display: store.ui.mediaQuery.isMobile ? "" : "flex",
+                    justifyContent: "flex-end",
+                    textAlign: "right",
+                  }}
+                >
                   <Upload>
-                <Button disabled={store.product.uploadBtnProduct} style={{
+                    <Button
+                      disabled={store.product.uploadBtnProduct}
+                      style={{
                         marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                        marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
-                }} icon={<UploadOutlined/>}>
+                      }}
+                      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 />

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);