Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

src/pages/App/DesktopLayout.js

@@ -121,14 +121,14 @@ export const DesktopLayout = observer(() => {
               <Menu.Item key="home">
                 <Link to={LINKS.HOME}>
                   <HomeOutlined/>
-                  <span>Home</span>
+                    <span>Beranda</span>
                 </Link>
               </Menu.Item>
               {store.authentication.userData.role !== "Retail" && (
                 <Menu.Item key="membership">
                   <Link to={LINKS.MEMBERSHIP}>
                       <FileProtectOutlined/>
-                    <span>Membership</span>
+                      <span>Keanggotaan</span>
                   </Link>
                 </Menu.Item>
               )}
@@ -142,13 +142,13 @@ export const DesktopLayout = observer(() => {
                   <Menu.Item key="partner">
                     <Link to={LINKS.PARTNER}>
                         <HomeOutlined/>
-                      <span>Partner</span>
+                        <span>Rekanan</span>
                     </Link>
                   </Menu.Item>
                   <Menu.Item key="commision">
                     <Link to={LINKS.COMMISSION}>
                         <HomeOutlined/>
-                      <span>Commision</span>
+                        <span>Komisi</span>
                     </Link>
                   </Menu.Item>
                   <Menu.Item key="supplier">
@@ -168,14 +168,14 @@ export const DesktopLayout = observer(() => {
                   <Menu.Item key="product">
                     <Link to={LINKS.PRODUCT}>
                         <DatabaseOutlined/>
-                      <span>Product</span>
+                        <span>Produk</span>
                     </Link>
                   </Menu.Item>
                   {store.authentication.userData.role === "Admin" && (
                     <Menu.Item key="category">
                       <Link to={LINKS.CATEGORY}>
                           <FileAddOutlined/>
-                        <span>Category</span>
+                          <span>Kategori</span>
                       </Link>
                     </Menu.Item>
                   )}
@@ -183,7 +183,7 @@ export const DesktopLayout = observer(() => {
                     <Menu.Item key="sub-category">
                       <Link to={LINKS.SUBCATEGORY}>
                           <FileSyncOutlined/>
-                        <span>Sub Category</span>
+                          <span>Sub Kategori</span>
                       </Link>
                     </Menu.Item>
                   )}
@@ -193,7 +193,7 @@ export const DesktopLayout = observer(() => {
                 <Menu.Item key="product">
                   <Link to={LINKS.PRODUCT}>
                       <DatabaseOutlined/>
-                    <span>Product</span>
+                      <span>Produk</span>
                   </Link>
                 </Menu.Item>
               )}
@@ -201,7 +201,7 @@ export const DesktopLayout = observer(() => {
                 <Menu.Item key="transaction">
                   <Link to={LINKS.TRANSACTION}>
                       <ShoppingCartOutlined/>
-                    <span>Transaction</span>
+                      <span>Transaksi</span>
                   </Link>
                 </Menu.Item>
               )}
@@ -214,7 +214,7 @@ export const DesktopLayout = observer(() => {
                 <Menu.Item key="payback-to-user">
                   <Link to={LINKS.PAYBACK}>
                       <PayCircleOutlined/>
-                      <span>Confirmation</span>
+                      <span>Konfirmasi</span>
                   </Link>
                 </Menu.Item>
                 )}
@@ -222,7 +222,7 @@ export const DesktopLayout = observer(() => {
                 <Menu.Item key="payback-from-user">
                     <Link to={LINKS.PAYBACK_CREATED}>
                         <AlipayOutlined/>
-                        <span>Created</span>
+                        <span>Dibuat oleh Saya</span>
                     </Link>
                 </Menu.Item>
                 )}
@@ -231,7 +231,7 @@ export const DesktopLayout = observer(() => {
                 <Menu.Item key="profile">
                   <Link to={LINKS.PROFILE}>
                       <UserOutlined/>
-                    <span>Profile</span>
+                      <span>Profil</span>
                   </Link>
                 </Menu.Item>
               )}

src/pages/App/MenuList.js

@@ -2,7 +2,6 @@ import React, {useEffect, useState} from "react";
 import {Menu} from "antd";
 import {Link} from "react-router-dom";
 import {
-    AlipayOutlined,
     AppstoreOutlined,
     DatabaseOutlined,
     FileAddOutlined,
@@ -11,7 +10,6 @@ import {
     HomeOutlined,
     MenuUnfoldOutlined,
     MoneyCollectOutlined,
-    PayCircleOutlined,
     ProfileOutlined,
     ProjectOutlined,
     ShoppingCartOutlined,
@@ -132,7 +130,7 @@ export const MenuList = observer((props) => {
           <Menu.Item key="payback-to-user">
             <Link to={LINKS.PAYBACK}>
               <FileProtectOutlined/>
-                <span>konfirmasi</span>
+                <span>Konfirmasi</span>
             </Link>
           </Menu.Item>
         )}
@@ -140,7 +138,7 @@ export const MenuList = observer((props) => {
           <Menu.Item key="payback-from-user">
               <Link to={LINKS.PAYBACK_CREATED}>
                   <FileProtectOutlined/>
-                  <span>Buat Pembayaran</span>
+                  <span>Dibuat oleh Saya</span>
               </Link>
           </Menu.Item>
         )}
@@ -149,16 +147,10 @@ export const MenuList = observer((props) => {
         <Menu.Item key="profile">
           <Link to={LINKS.PROFILE}>
               <UserOutlined/>
-            <span>Profile</span>
+              <span>Profil</span>
           </Link>
         </Menu.Item>
       )}
-      {/*<Menu.Item key="about">*/}
-      {/*	<Link to={'/app/about'}>*/}
-      {/*		<CalendarOutlined/>*/}
-      {/*		<span>About</span>*/}
-      {/*	</Link>*/}
-      {/*</Menu.Item>*/}
       <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
     </Menu>
   );

src/pages/Membership/DetailUser.js

@@ -32,7 +32,6 @@ export const DetailUser = observer(() => {
   const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
 
-  //console.log(id)
   useEffect(() => {
     (async () => {
       modalLoader.setLoading(true);

src/pages/Membership/Membership.js

@@ -14,7 +14,7 @@ import {
   Select,
   Space,
   Table,
-  Tag,
+  Tag
 } from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";

src/pages/Payback/PaybackModal.js

@@ -3,7 +3,6 @@ import {Form, InputNumber, message, Modal, Upload,} from "antd";
 import {useStore} from "../../utils/useStore";
 import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
 import {ModalLoaderContext} from "../../utils/modal";
-import {http} from "../../utils/http";
 import {appConfig} from "../../config/app";
 
 export const PaybackModal = ({initialData}) => {
@@ -32,7 +31,7 @@ export const PaybackModal = ({initialData}) => {
 
   const uploadHandler = async (args) => {
     const file = args.file;
-    const res = await http.upload(file);
+    const res = await store.payback.uploadImages(file);
     setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
     setResponseFilename(res.body.filename);
     setFileList([{

src/pages/Product/Product.js

@@ -1,10 +1,6 @@
-import React, { useContext, useEffect } from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {Button, Card, Col, Input, message, Row, Upload} from "antd";
-import {
+import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
-  FilterOutlined,
-  PlusSquareOutlined,
-  UploadOutlined,
-} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
@@ -17,6 +13,7 @@ const { Search } = Input;
 export const Product = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const init = async () => {
@@ -53,6 +50,67 @@ export const Product = observer(() => {
     },
   ];
 
+  const beforeUpload = (file) => {
+    let isLt2M;
+    let allowedFile = [
+      "text/csv", "application/csv",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
+      "application/vnd.ms-excel",
+      "application/vnd.ms-excel.sheet.macroEnabled.12"
+    ];
+    let isValid = allowedFile.includes(file.type);
+    if (!isValid) {
+      message.error("You can only upload Excel file!");
+    }
+    isLt2M = file.size / 1024 / 1024 < 10;
+    if (!isLt2M) {
+      message.error("File must smaller than 10MB!");
+    }
+    return isValid && isLt2M ? true : Upload.LIST_IGNORE;
+  };
+
+  const uploadHandler = async (args) => {
+    const file = args.file;
+    const responseUpload = await store.product.uploadExcel(file);
+
+    if (responseUpload.status === 201) {
+      message.success("Success upload excel!");
+    } else {
+      message.error("Failed upload excel!");
+      setLoading(false);
+    }
+
+    const responseUploadProduct = await handleUploadProduct(responseUpload);
+    setLoading(false);
+  };
+
+  const handleChange = (info) => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+    } else {
+      setLoading(false)
+    }
+  };
+
+  const handleUploadProduct = async (data) => {
+    const response = await store.product.uploadProduct({fileName: data.body.filename});
+
+    if (response.status === 201) {
+      message.success("Success Create Product by Excel!");
+    } else {
+      message.error("Failed Create Product by Excel!");
+      setLoading(false);
+    }
+    return response;
+  }
+
+  const loadingState = (
+      <div>
+        {loading ? <LoadingOutlined/> : null}
+      </div>
+  );
+
   return (
       <div className={["ppob-container"].join(" ")}>
         <BreadcumbComponent data={routeData}/>
@@ -94,9 +152,17 @@ export const Product = observer(() => {
                             textAlign: "right",
                           }}
                       >
-                    <Upload>
+                        <Upload
+                            showUploadList={false}
+                            onChange={handleChange}
+                            beforeUpload={(file) => beforeUpload(file)}
+                            customRequest={(args) => uploadHandler(args)}
+                            onRemove={(file) => {
+                              setLoading(false);
+                            }}
+                        >
                           <Button
-                        disabled={store.product.uploadBtnProduct}
+                              disabled={loading}
                               style={{
                                 marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
@@ -106,11 +172,7 @@ export const Product = observer(() => {
                             Upload Product
                           </Button>
                         </Upload>
-                    {/* <Button
+                        {loadingState}
-                      onClick={() => (store.product.visibleModalProduct = true)}
-                    >
-                      <PlusSquareOutlined /> New
-                    </Button> */}
                       </div>
                     </div>
               </Col>

src/store/payback.js

@@ -93,4 +93,13 @@ export class Payback {
       console.error(e);
     }
   }
+
+  async uploadImages(data) {
+    try {
+      const response = await http.upload(data);
+      return response;
+    } catch (e) {
+      console.error(e);
+    }
+  }
 }

src/store/product.js

@@ -132,6 +132,24 @@ export class Product {
             console.error(e);
         }
     }
+
+    async uploadExcel(data) {
+        try {
+            const response = await http.upload(data);
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    async uploadProduct(data) {
+        try {
+            const response = await http.post('/product/upload-product').send(data);
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+    }
 }
 
 

src/store/transaction.js

@@ -22,11 +22,12 @@ export class Transaction {
     filterSubCategory = null;
 
     pageHistoryTransaction = 0;
-    pageHistoryTopUp = 0;
     pageSizeHistoryTransaction = 10
     dataHistoryTransaction = [];
     total_dataHistoryTransaction = 0;
 
+    pageHistoryTopUp = 0;
+    pageSizeHistoryTopUp = 10;
     dataHistoryTopUp = [];
     total_dataHistoryTopUp = 0;
 
@@ -80,9 +81,7 @@ export class Transaction {
 
     async getDataHistoryTopUp(id) {
         try {
-            //console.log("Top up")
+            const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`);
-            const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
-            //console.log(response,"data")
             this.dataHistoryTopUp = response.body.data ?? []
             this.total_dataHistoryTopUp = response?.body?.count ?? 0
         } catch (e) {