Merge branch 'develop' into 'devops-production'

Develop

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

src/component/CategoryComponent.js

@@ -45,7 +45,7 @@ export const CategoryComponent = observer((props) => {
       key: "name",
     },
     {
-      title: "Action",
+      title: "Tindakan",
       key: "action",
       render: (text, record) => (
         <Space size="middle">
@@ -209,7 +209,7 @@ export const CategoryComponent = observer((props) => {
         visible={store.category.visibleModalCategory}
         title={idData ? "Edit Category" : "Create a new Category"}
         okText={idData ? "Edit" : "Create"}
-        cancelText="Cancel"
+        cancelText="Batal"
         onCancel={() => {
           form.resetFields();
           handleCancel();

src/component/CommissionComponent.js

@@ -28,13 +28,13 @@ export const CommissionComponent = observer((props) => {
       key: "name",
     },
     {
-      title: "Amount",
+      title: "Nominal",
       dataIndex: "commission",
       key: "commission",
       render: (text) => <span>{text}%</span>,
     },
     {
-      title: "Action",
+      title: "Tindakan",
       key: "action",
       render: (text, record) => (
         <Space size="middle">
@@ -44,6 +44,8 @@ export const CommissionComponent = observer((props) => {
     },
   ];
 
+  if (store.authentication.userData.role === "Customer Service") columns.pop();
+  
   const handleCancel = () => {
     setIdData("");
     store.commission.visibleModalCommission = false;
@@ -93,7 +95,7 @@ export const CommissionComponent = observer((props) => {
         visible={store.commission.visibleModalCommission}
         title={"Edit Commission"}
         okText={"Edit"}
-        cancelText="Cancel"
+        cancelText="Batal"
         onCancel={() => {
           form.resetFields();
           handleCancel();

src/component/PartnerComponent.js

@@ -86,7 +86,7 @@ export const PartnerComponent = observer((props) => {
       key: "npwp",
     },
     {
-      title: "Address",
+      title: "Alamat",
       dataIndex: "address",
       key: "address",
     },
@@ -104,7 +104,7 @@ export const PartnerComponent = observer((props) => {
       ),
     },
     {
-      title: "Action",
+      title: "Tindakan",
       key: "action",
       render: (text, record) => (
         <Space size="middle">
@@ -124,6 +124,8 @@ export const PartnerComponent = observer((props) => {
     },
   ];
   
+  if (store.authentication.userData.role === "Customer Service") columns.pop();
+
   const deleteData = async (id) => {
     try {
       modalLoader.setLoading(true);
@@ -143,12 +145,12 @@ export const PartnerComponent = observer((props) => {
       icon: <ExclamationCircleOutlined />,
       okText: "Yes",
       okType: "primary",
-      cancelText: "Cancel",
+      cancelText: "Batal",
       onOk() {
         return deleteData(id);
       },
       onCancel() {
-        console.log("Cancel");
+        console.log("Batal");
       },
     });
   };
@@ -273,7 +275,7 @@ export const PartnerComponent = observer((props) => {
                           <div style={{ marginBottom: 10 }}>
                             <small>Nama : {item.name}</small> <br />
                             <small>Npwp : {item.npwp}</small> <br />
-                            <small>Address : {item.address}</small>
+                            <small>Alamat : {item.address}</small>
                           </div>
                           <Space size="small">
                             <Button
@@ -333,7 +335,7 @@ export const PartnerComponent = observer((props) => {
             : "Create a new partner"
         }
         okText={idData ? "Edit" : "Create"}
-        cancelText="Cancel"
+        cancelText="Batal"
         onCancel={() => {
           form.resetFields();
           handleCancel();
@@ -450,7 +452,7 @@ export const PartnerComponent = observer((props) => {
               </Form.Item>
               <Form.Item
                 name="address"
-                label="Address"
+                label="Alamat"
                 rules={[
                   idData
                     ? { required: false }

src/component/ProductComponent.js

@@ -113,7 +113,7 @@ export const ProductComponent = observer((props) => {
       ),
     },
     {
-      title: "Action",
+      title: "Tindakan",
       key: "action",
       render: (text, record) => (
         <Button
@@ -156,12 +156,12 @@ export const ProductComponent = observer((props) => {
       icon: <ExclamationCircleOutlined />,
       okText: "Yes",
       okType: "primary",
-      cancelText: "Cancel",
+      cancelText: "Batal",
       onOk() {
         return deleteData(id);
       },
       onCancel() {
-        console.log("Cancel");
+        console.log("Batal");
       },
     });
   };
@@ -349,8 +349,8 @@ export const ProductComponent = observer((props) => {
                       <div style={{}}>
                         <p>
                           <small>{item.product_name}</small> <br />
-                          <small>Harga Beli : {item.current_price_price}</small>
+                          {/* <small>Harga Beli : {item.current_price_price}</small>
-                          <br />
+                          <br /> */}
                           <small>Harga Jual : {item.mark_up_price}</small>
                         </p>
                         <p></p>
@@ -387,7 +387,7 @@ export const ProductComponent = observer((props) => {
         visible={store.product.visibleModalProduct}
         title={idData ? "Edit Product" : "Create a new Product"}
         okText={idData ? "Edit" : "Create"}
-        cancelText="Cancel"
+        cancelText="Batal"
         onCancel={() => {
           form.resetFields();
           handleCancel();

src/component/SubcategoryComponent.js

@@ -57,7 +57,7 @@ export const SubcategoryComponent = observer((props) => {
       key: "categoryName",
     },
     {
-      title: "Action",
+      title: "Tindakan",
       key: "action",
       render: (text, record) => (
         <Space size="middle">
@@ -214,7 +214,7 @@ export const SubcategoryComponent = observer((props) => {
         visible={store.subcategory.visibleModalSubcategory}
         title={idData ? "Edit Sub Category" : "Create a new sub category"}
         okText={idData ? "Edit" : "Create"}
-        cancelText="Cancel"
+        cancelText="Batal"
         onCancel={() => {
           form.resetFields();
           handleCancel();

src/component/SupplierComponent.js

@@ -112,7 +112,7 @@ export const SupplierComponent = observer((props) => {
       ),
     },
     {
-      title: "Action",
+      title: "Tindakan",
       key: "action",
       width: "20%",
       render: (text, record) => (
@@ -130,6 +130,8 @@ export const SupplierComponent = observer((props) => {
     },
   ];
 
+  if (store.authentication.userData.role === "Customer Service") columns.pop();
+  
   const deleteData = async (id) => {
     try {
       console.log(id);
@@ -151,12 +153,12 @@ export const SupplierComponent = observer((props) => {
       icon: <ExclamationCircleOutlined />,
       okText: "Yes",
       okType: "primary",
-      cancelText: "Cancel",
+      cancelText: "Batal",
       onOk() {
         return deleteData(id);
       },
       onCancel() {
-        console.log("Cancel");
+        console.log("Batal");
       },
     });
   };
@@ -342,7 +344,7 @@ export const SupplierComponent = observer((props) => {
         visible={store.supplier.visibleModalSupplier}
         title={idData ? "Edit Supplier" : "Create a new Supplier"}
         okText={idData ? "Edit" : "Create"}
-        cancelText="Cancel"
+        cancelText="Batal"
         onCancel={() => {
           form.resetFields();
           handleCancel();

src/component/TopupsaldoModal.js

@@ -34,7 +34,7 @@ export const TopupsaldoModal = observer((props) => {
         visible={store.supplier.visibleModalTransaction}
         title="Top Up Saldo"
         okText="Top Up"
-        cancelText="Cancel"
+        cancelText="Batal"
         onCancel={() => {
           form.resetFields();
           handleCancelTransaction();
@@ -66,7 +66,7 @@ export const TopupsaldoModal = observer((props) => {
           </Form.Item>
           <Form.Item
             name="amount"
-            label="Amount"
+            label="Nominal"
             rules={[{ required: true, message: "Please input amount!" }]}
           >
             <InputNumber

src/constants/payback.js

@@ -2,6 +2,6 @@ export const PAYBACK_STATUS = {
     0: 'Pending',
     1: 'Success',
     2: 'Failed',
-    3: 'Approved',
+    3: 'Disetujui',
-    4: 'Rejected',
+    4: 'Ditolak',
 }

src/pages/App/DesktopLayout.js

@@ -25,7 +25,7 @@ import {
   DollarCircleOutlined,
   UsergroupAddOutlined,
   UnorderedListOutlined,
-  FormOutlined
+  FormOutlined,
 } from "@ant-design/icons";
 import { AppRoute, LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -129,7 +129,8 @@ export const DesktopLayout = observer(() => {
             }}
           >
             <Menu>
-              {store.authentication.userData.role === "Admin" && (
+              {(store.authentication.userData.role === "Admin" ||
+                store.authentication.userData.role === "Customer Service") && (
                 <Menu.Item key="home">
                   <Link to={LINKS.HOME}>
                     <HomeOutlined />
@@ -145,7 +146,8 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )}
-              {store.authentication.userData.role === "Admin" && (
+              {(store.authentication.userData.role === "Admin" ||
+                store.authentication.userData.role === "Customer Service") && (
                 <SubMenu
                   key="keanggotaan"
                   icon={<UsergroupAddOutlined />}
@@ -154,7 +156,7 @@ export const DesktopLayout = observer(() => {
                   <Menu.Item key="membership">
                     <Link to={LINKS.MEMBERSHIP}>
                       <UnorderedListOutlined />
-                      <span>List Anggota</span>
+                      <span>Daftar Anggota</span>
                     </Link>
                   </Menu.Item>
                   <Menu.Item key="konfirmasi">
@@ -174,7 +176,7 @@ export const DesktopLayout = observer(() => {
                   <Menu.Item key="membership">
                     <Link to={LINKS.MEMBERSHIP}>
                       <UnorderedListOutlined />
-                      <span>List Anggota</span>
+                      <span>Daftar Anggota</span>
                     </Link>
                   </Menu.Item>
                   <Menu.Item key="konfirmasi">
@@ -201,7 +203,8 @@ export const DesktopLayout = observer(() => {
                   </Link>
                 </Menu.Item>
               )} */}
-              {store.authentication.userData.role === "Admin" && (
+              {(store.authentication.userData.role === "Admin" ||
+                store.authentication.userData.role === "Customer Service") && (
                 <SubMenu
                   key="config"
                   icon={<SettingOutlined />}
@@ -228,7 +231,8 @@ export const DesktopLayout = observer(() => {
                   </Menu.Item>
                 </SubMenu>
               )}
-              {store.authentication.userData.role === "Admin" && (
+              {(store.authentication.userData.role === "Admin" ||
+                store.authentication.userData.role === "Customer Service") && (
                 <SubMenu
                   key="product-main"
                   icon={<PieChartOutlined />}
@@ -308,14 +312,16 @@ export const DesktopLayout = observer(() => {
                       </Link>
                     </Menu.Item>
                   )}
-                  {store.authentication.userData.role !== "Admin" && (
+                  {store.authentication.userData.role !== "Admin" ||
+                    (store.authentication.userData.role !==
+                      "Customer Service" && (
                       <Menu.Item key="payback-from-user">
                         <Link to={LINKS.PAYBACK_CREATED}>
                           <AlipayOutlined />
                           <span>Dibuat oleh Saya</span>
                         </Link>
                       </Menu.Item>
-                  )}
+                    ))}
                 </SubMenu>
               )}
               {store.authentication.userData.role !== "Admin" && (

src/pages/App/MenuList.js

@@ -56,7 +56,8 @@ export const MenuList = observer((props) => {
       overflowedIndicator={0}
       forceSubMenuRender={true}
     >
-      {store.authentication.userData.role === "Admin" && (
+      {(store.authentication.userData.role === "Admin" ||
+        store.authentication.userData.role === "Customer Service") && (
         <Menu.Item key="home">
           <Link to={LINKS.HOME}>
             <HomeOutlined />
@@ -72,7 +73,8 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role === "Admin" && (
+      {(store.authentication.userData.role === "Admin" ||
+        store.authentication.userData.role === "Customer Service") && (
         <SubMenu
           key="keanggotaan"
           icon={<UsergroupAddOutlined />}
@@ -81,7 +83,7 @@ export const MenuList = observer((props) => {
           <Menu.Item key="membership">
             <Link to={LINKS.MEMBERSHIP}>
               <UnorderedListOutlined />
-                <span>List Anggota</span>
+              <span>Daftar Anggota</span>
             </Link>
           </Menu.Item>
           <Menu.Item key="konfirmasi">
@@ -101,7 +103,7 @@ export const MenuList = observer((props) => {
           <Menu.Item key="membership">
             <Link to={LINKS.MEMBERSHIP}>
               <UnorderedListOutlined />
-                <span>List Anggota</span>
+              <span>Daftar Anggota</span>
             </Link>
           </Menu.Item>
           <Menu.Item key="konfirmasi">
@@ -121,7 +123,7 @@ export const MenuList = observer((props) => {
             <Menu.Item key="membership">
               <Link to={LINKS.MEMBERSHIP}>
                 <UnorderedListOutlined />
-                <span>List Anggota</span>
+                <span>Daftar Anggota</span>
               </Link>
             </Menu.Item>
           </SubMenu>
@@ -142,7 +144,8 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role === "Admin" && (
+      {(store.authentication.userData.role === "Admin" ||
+        store.authentication.userData.role === "Customer Service") && (
         <SubMenu key="config" icon={<SettingOutlined />} title="Config">
           <Menu.Item key="partner">
             <Link to={LINKS.PARTNER}>
@@ -164,7 +167,8 @@ export const MenuList = observer((props) => {
           </Menu.Item>
         </SubMenu>
       )}
-      {store.authentication.userData.role === "Admin" && (
+      {(store.authentication.userData.role === "Admin" ||
+        store.authentication.userData.role === "Customer Service") && (
         <SubMenu
           key="product-main"
           icon={<AppstoreAddOutlined />}
@@ -176,22 +180,20 @@ export const MenuList = observer((props) => {
               <span>Produk</span>
             </Link>
           </Menu.Item>
-          {store.authentication.userData.role === "Admin" && (
+
           <Menu.Item key="sub-category">
             <Link to={LINKS.SUBCATEGORY}>
               <FileSyncOutlined />
               <span>Sub Kategori</span>
             </Link>
           </Menu.Item>
-          )}
+
-          {store.authentication.userData.role === "Admin" && (
           <Menu.Item key="category">
             <Link to={LINKS.CATEGORY}>
               <FileAddOutlined />
               <span>Kategori</span>
             </Link>
           </Menu.Item>
-          )}
         </SubMenu>
       )}
       {store.authentication.userData.role === "Admin Partner" && (
@@ -240,14 +242,15 @@ export const MenuList = observer((props) => {
               </Link>
             </Menu.Item>
           )}
-          {store.authentication.userData.role !== "Admin" && (
+          {store.authentication.userData.role !== "Admin" ||
+            (store.authentication.userData.role !== "Customer Service" && (
               <Menu.Item key="payback-from-user">
                 <Link to={LINKS.PAYBACK_CREATED}>
                   <FileProtectOutlined />
                   <span>Dibuat oleh Saya</span>
                 </Link>
               </Menu.Item>
-          )}
+            ))}
         </SubMenu>
       )}
       {store.authentication.userData.role !== "Admin" && (

src/pages/Config/Partner.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Button, Card, Col, Input, Row, Tabs, message } from "antd";
-import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -40,7 +40,7 @@ export const Partner = observer(() => {
     },
     {
       route: LINKS.PARTNER,
-      name: <span style={{fontWeight: 'bold'}}>Rekanan</span>,
+      name: <span style={{ fontWeight: "bold" }}>Rekanan</span>,
     },
   ];
 
@@ -64,9 +64,13 @@ export const Partner = observer(() => {
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
             /> */}
-            <Button onClick={() => store.partner.visibleModalPartner = true}>
+            {store.authentication.userData.role !== "Customer Service" && (
+              <Button
+                onClick={() => (store.partner.visibleModalPartner = true)}
+              >
                 <PlusSquareOutlined /> New
               </Button>
+            )}
           </Col>
         </Row>
         <PartnerComponent />

src/pages/Config/Supplier.js

@@ -80,11 +80,13 @@ export const Supplier = observer(() => {
               }}
               onSearch={(value) => console.log(value)}
             /> */}
+            {store.authentication.userData.role !== "Customer Service" && (
               <Button
                 onClick={() => (store.supplier.visibleModalSupplier = true)}
               >
                 <PlusSquareOutlined /> New
               </Button>
+            )}
           </Col>
         </Row>
         <SupplierComponent />

src/pages/Home/Home.js

@@ -52,7 +52,8 @@ export const Home = observer(() => {
   return (
     <div>
       {store.ui.mediaQuery.isDesktop &&
-        store.authentication.userData.role === "Admin" && (
+        (store.authentication.userData.role === "Admin" ||
+          store.authentication.userData.role === "Customer Service") && (
           <Row
             style={{
               marginTop: 30,
@@ -282,7 +283,8 @@ export const Home = observer(() => {
           </Row>
         )}
       {store.ui.mediaQuery.isMobile &&
-        store.authentication.userData.role === "Admin" && (
+        (store.authentication.userData.role === "Admin" ||
+          store.authentication.userData.role === "Customer Service") && (
           <Row
             style={{
               marginTop: 20,

src/pages/Membership/DetailUser.js

@@ -161,7 +161,12 @@ export const DetailUser = observer(() => {
   };
   const columns = [
     {
-      title: "Amount",
+      title: "Pengirim",
+      dataIndex: "sender_name",
+      key: "sender_name",
+    },
+    {
+      title: "Nominal",
       dataIndex: "amount",
       key: "amount",
       render: (text) =>
@@ -391,8 +396,8 @@ export const DetailUser = observer(() => {
             Detail User
           </Title>
           <Col
-            lg={store.authentication.userData.role === "Admin" ? 18 : 17}
+            lg={store.authentication.userData.role === "Admin" ? 18 : 13}
-            xs={store.authentication.userData.role === "Admin" ? 18 : 17}
+            xs={store.authentication.userData.role === "Admin" ? 18 : 13}
             style={{ textAlign: "right" }}
           >
             <Space
@@ -401,6 +406,8 @@ export const DetailUser = observer(() => {
               wrap={true}
               style={{ textAlign: "center" }}
             >
+              {store.authentication.userData.role === "Admin" && (
+                <Space>
                   <Button
                     type={
                       store.membership.dataDetail.is_active === true
@@ -425,9 +432,11 @@ export const DetailUser = observer(() => {
                         name: store.membership.dataDetail.userDetail.name,
                         username: store.membership.dataDetail.username,
                         identity_number:
-                      store.membership.dataDetail.userDetail.identity_number,
+                          store.membership.dataDetail.userDetail
+                            .identity_number,
                         image_identity:
-                      store.membership.dataDetail?.userDetail.image_identity,
+                          store.membership.dataDetail?.userDetail
+                            .image_identity,
                         image_store:
                           store.membership.dataDetail?.userDetail.image_store,
                         phone_number:
@@ -468,6 +477,8 @@ export const DetailUser = observer(() => {
                   >
                     Ganti Password
                   </Button>
+                </Space>
+              )}
               {((store.authentication.userData.role === "Sales" &&
                 store.membership.dataDetail.is_rejected === true &&
                 store.membership.dataDetail.is_active === false) ||

src/pages/Membership/Konfirmasi.js

@@ -113,7 +113,7 @@ export const Konfirmasi = observer(() => {
         ),
     },
     {
-      title: "Action",
+      title: "Tindakan",
       dataIndex: "amount",
       key: "action",
       width: "10%",
@@ -126,14 +126,14 @@ export const Konfirmasi = observer(() => {
                   title: `Are you sure Accept this submission?`,
                   icon: <CheckOutlined />,
                   okText: "Accept",
-                  cancelText: "Cancel",
+                  cancelText: "Batal",
                   okType: "primary",
                   onOk() {
                     handleApprove(record.id);
                     console.log(record.id);
                   },
                   onCancel() {
-                    console.log("Cancel");
+                    console.log("Batal");
                   },
                 });
               }}
@@ -152,13 +152,13 @@ export const Konfirmasi = observer(() => {
                   title: `Are you sure Reject this submission?`,
                   icon: <StopOutlined />,
                   okText: "Reject",
-                  cancelText: "Cancel",
+                  cancelText: "Batal",
                   okType: "primary",
                   onOk() {
                     handleReject(record.id);
                   },
                   onCancel() {
-                    console.log("Cancel");
+                    console.log("Batal");
                   },
                 });
               }}
@@ -315,13 +315,13 @@ export const Konfirmasi = observer(() => {
                                         title: `Are you sure Accept this submission?`,
                                         icon: <CheckOutlined />,
                                         okText: "Accept",
-                                        cancelText: "Cancel",
+                                        cancelText: "Batal",
                                         okType: "primary",
                                         onOk() {
                                           handleApprove(item.id);
                                         },
                                         onCancel() {
-                                          console.log("Cancel");
+                                          console.log("Batal");
                                         },
                                       });
                                     }}
@@ -340,13 +340,13 @@ export const Konfirmasi = observer(() => {
                                         title: `Are you sure Reject this submission?`,
                                         icon: <StopOutlined />,
                                         okText: "Reject",
-                                        cancelText: "Cancel",
+                                        cancelText: "Batal",
                                         okType: "primary",
                                         onOk() {
                                           handleReject(item.id);
                                         },
                                         onCancel() {
-                                          console.log("Cancel");
+                                          console.log("Batal");
                                         },
                                       });
                                     }}

src/pages/Membership/Membership.js

@@ -196,7 +196,7 @@ export const Membership = observer(() => {
         }).format(text),
     },
     {
-      title: "Action",
+      title: "Tindakan",
       key: "action",
       render: (text, record) => (
         <Space size="middle">
@@ -344,6 +344,8 @@ export const Membership = observer(() => {
                   marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
               /> */}
+
+              {store.authentication.userData.role !== "Customer Service" && (
                 <Button
                   onClick={() => {
                     setInitialData({});
@@ -352,6 +354,7 @@ export const Membership = observer(() => {
                 >
                   <PlusSquareOutlined /> New
                 </Button>
+              )}
             </Col>
           </Row>
           {store.ui.mediaQuery.isDesktop && (
@@ -496,7 +499,7 @@ export const Membership = observer(() => {
         visible={isVisibleTopUpModal}
         title="Top Up Saldo"
         okText="Top Up"
-        cancelText="Cancel"
+        cancelText="Batal"
         onCancel={() => {
           form.resetFields();
           handleCancelTransaction();
@@ -517,7 +520,7 @@ export const Membership = observer(() => {
         <Form form={form} layout="vertical">
           <Form.Item
             name="amount"
-            label="Amount"
+            label="Nominal"
             rules={[{ required: true, message: "Please input amount!" }]}
           >
             <InputNumber

src/pages/Membership/MembershipModal.js

@@ -195,7 +195,7 @@ export const MembershipModal = ({
           : "Create a new Membership"
       }
       okText={initialData.id ? "Edit" : "Create"}
-      cancelText="Cancel"
+      cancelText="Batal"
       onCancel={() => {
         form.resetFields();
         onCancel();

src/pages/Payback/Payback.js

@@ -72,7 +72,7 @@ export const Payback = observer(() => {
       key: "userData_name",
     },
     {
-      title: "Picture",
+      title: "Gambar",
       dataIndex: "image_prove",
       key: "image_prove",
       render: (text, record) => (
@@ -84,7 +84,7 @@ export const Payback = observer(() => {
       ),
     },
     {
-      title: "Amount",
+      title: "Nominal",
       dataIndex: "amount",
       key: "amount",
       width: "20%",
@@ -95,7 +95,7 @@ export const Payback = observer(() => {
         }).format(text),
     },
     {
-      title: "Action",
+      title: "Tindakan",
       dataIndex: "amount",
       key: "action",
       width: "10%",
@@ -108,13 +108,13 @@ export const Payback = observer(() => {
                   title: `Are you sure Accept this submission?`,
                   icon: <CheckOutlined />,
                   okText: "Accept",
-                  cancelText: "Cancel",
+                  cancelText: "Batal",
                   okType: "primary",
                   onOk() {
                     handleAction(record.id, "accept");
                   },
                   onCancel() {
-                    console.log("Cancel");
+                    console.log("Batal");
                   },
                 });
               }}
@@ -133,13 +133,13 @@ export const Payback = observer(() => {
                   title: `Are you sure Reject this submission?`,
                   icon: <StopOutlined />,
                   okText: "Reject",
-                  cancelText: "Cancel",
+                  cancelText: "Batal",
                   okType: "primary",
                   onOk() {
                     handleAction(record.id, "reject");
                   },
                   onCancel() {
-                    console.log("Cancel");
+                    console.log("Batal");
                   },
                 });
               }}
@@ -377,13 +377,13 @@ export const Payback = observer(() => {
                                         title: `Are you sure Accept this submission?`,
                                         icon: <CheckOutlined />,
                                         okText: "Accept",
-                                        cancelText: "Cancel",
+                                        cancelText: "Batal",
                                         okType: "primary",
                                         onOk() {
                                           handleAction(item.id, "accept");
                                         },
                                         onCancel() {
-                                          console.log("Cancel");
+                                          console.log("Batal");
                                         },
                                       });
                                     }}
@@ -402,13 +402,13 @@ export const Payback = observer(() => {
                                         title: `Are you sure Reject this submission?`,
                                         icon: <StopOutlined />,
                                         okText: "Reject",
-                                        cancelText: "Cancel",
+                                        cancelText: "Batal",
                                         okType: "primary",
                                         onOk() {
                                           handleAction(item.id, "reject");
                                         },
                                         onCancel() {
-                                          console.log("Cancel");
+                                          console.log("Batal");
                                         },
                                       });
                                     }}
@@ -478,7 +478,7 @@ export const Payback = observer(() => {
         <Row>
           <Col span={24}>
             <Title level={5} type={"secondary"} strong>
-              Sender
+              Pengirim
             </Title>
             <Form layout="vertical" name="filter" form={form}>
               <Select
@@ -498,14 +498,14 @@ export const Payback = observer(() => {
               </Select>
               <Form.Item
                 name="start_date"
-                label="Dari"
+                label="Dari Tanggal"
                 rules={[{ required: true, message: "Please input Date!" }]}
               >
                 <DatePicker style={{ width: "100%" }}/>
               </Form.Item>
               <Form.Item
                 name="end_date"
-                label="Sampai"
+                label="Sampai Tanggal"
                 rules={[{ required: true, message: "Please input Date!" }]}
               >
                 <DatePicker style={{ width: "100%" }} />

src/pages/Payback/PaybackCreated.js

@@ -56,7 +56,7 @@ export const PaybackCreated = observer(() => {
 
   const columns = [
     {
-      title: "Picture",
+      title: "Gambar",
       dataIndex: "image_prove",
       key: "image_prove",
       render: (text, record) => (
@@ -68,7 +68,7 @@ export const PaybackCreated = observer(() => {
       ),
     },
     {
-      title: "Amount",
+      title: "Nominal",
       dataIndex: "amount",
       key: "amount",
       render: (text) =>
@@ -103,8 +103,8 @@ export const PaybackCreated = observer(() => {
             : record.status === 2
             ? "Failed"
             : record.status === 3
-            ? "Approved"
+            ? "Disetujui"
-            : "Rejected"}
+            : "Ditolak"}
         </Tag>
       ),
     },
@@ -313,8 +313,8 @@ export const PaybackCreated = observer(() => {
                                   : item.status === 2
                                   ? "Failed"
                                   : item.status === 3
-                                  ? "Approved"
+                                  ? "Disetujui"
-                                  : "Rejected"}
+                                  : "Ditolak"}
                               </Tag>
                             </div>
                           </div>

src/pages/Payback/PaybackModal.js

@@ -100,7 +100,7 @@ export const PaybackModal = ({ initialData }) => {
       visible={store.payback.visibleModalPayback}
       title={"Create a new Created"}
       okText={"Create"}
-      cancelText="Cancel"
+      cancelText="Batal"
       onCancel={handleCancel}
       onOk={() => {
         form
@@ -120,7 +120,7 @@ export const PaybackModal = ({ initialData }) => {
         name="form_in_modal"
         initialValues={initialData}
       >
-        <Form.Item label="Upload Picture" name="image_prove">
+        <Form.Item label="Upload Gambar" name="image_prove">
           <div>
             <Upload
               listType="picture-card"

src/pages/Product/Category.js

@@ -8,7 +8,6 @@ import {LINKS} from "../../routes/app";
 import { CategoryComponent } from "../../component/CategoryComponent";
 import { ModalLoaderContext } from "../../utils/modal";
 
-
 export const Category = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
@@ -49,11 +48,13 @@ export const Category = observer(() => {
       <Card>
         <Row style={{ marginBottom: 20 }}>
           <Col span={24} style={{ textAlign: "right" }}>
+            {store.authentication.userData.role !== "Customer Service" && (
               <Button
                 onClick={() => (store.category.visibleModalCategory = true)}
               >
                 <PlusSquareOutlined /> New
               </Button>
+            )}
           </Col>
         </Row>
 

src/pages/Product/Product.js

@@ -250,7 +250,7 @@ export const Product = observer(() => {
         visible={visibleModalUpload}
         title={"Upload Excel Product"}
         okText={"Create"}
-        cancelText="Cancel"
+        cancelText="Batal"
         onCancel={() => {
           form.resetFields();
           handleCancel();

src/pages/Product/Subcategory.js

@@ -55,11 +55,15 @@ export const Subcategory = observer(() => {
       <Card>
         <Row style={{ marginBottom: 20 }}>
           <Col span={24} style={{ textAlign: "right" }}>
+            {store.authentication.userData.role !== "Customer Service" && (
               <Button
-              onClick={() => (store.subcategory.visibleModalSubcategory = true)}
+                onClick={() =>
+                  (store.subcategory.visibleModalSubcategory = true)
+                }
               >
                 <PlusSquareOutlined /> New
               </Button>
+            )}
           </Col>
         </Row>
         <SubcategoryComponent />

src/pages/Profile/Profile.js

@@ -14,6 +14,7 @@ import {
   List,
   Image,
   Tag,
+  Tabs,
 } from "antd";
 import moment from "moment";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -23,14 +24,15 @@ import { observer } from "mobx-react-lite";
 import { FilterOutlined } from "@ant-design/icons";
 import { format, parseISO } from "date-fns";
 import { appConfig } from "../../config/app";
-
 import { ModalLoaderContext } from "../../utils/modal";
-
+import { useParams } from "react-router-dom";
+const { TabPane } = Tabs;
 const { Title, Text } = Typography;
 const { RangePicker } = DatePicker;
 export const Profile = observer(() => {
   const store = useStore();
   const [form] = Form.useForm();
+  const { id } = useParams();
   const modalLoader = useContext(ModalLoaderContext);
   const [filterStart, setFilterStart] = useState([]);
   const [filterEnd, setFilterEnd] = useState([]);
@@ -59,11 +61,16 @@ export const Profile = observer(() => {
       await Promise.allSettled([
         store.authentication.getProfile(),
         store.transaction.getDataHistoryTransaction(),
+        store.transaction.getDataHistoryTopUpProfile(
+          store.authentication.profileData?.id
+          
+        ),
       ]);
       modalLoader.setLoading(false);
     })();
   }, []);
 
+  
   const handleRemoveFilter = async () => {
     store.transaction.filterStart = null;
     store.transaction.filterEnd = null;
@@ -172,10 +179,10 @@ export const Profile = observer(() => {
             }
           >
             {record.status === 1
-              ? "Success"
+              ? "Sukses"
               : record.status === 0
-              ? "Pending"
+              ? "Dalam Proses"
-              : "Failed"}
+              : "Gagal"}
           </Tag>
         );
       },
@@ -210,6 +217,35 @@ export const Profile = observer(() => {
     },
   ];
 
+  const column = [
+    {
+      title: "Pengirim",
+      dataIndex: "sender_name",
+      key: "sender_name",
+    },
+    {
+      title: "Nominal",
+      dataIndex: "amount",
+      key: "amount",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    {
+      title: "Transaction Date",
+      dataIndex: "transaction_date",
+      key: "transaction_date",
+      render: (text, record) => {
+        return (
+          <Text>
+            {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
+          </Text>
+        );
+      },
+    },
+  ];
   const styleSaldoTitle = store.ui.mediaQuery.isDesktop
     ? {
         display: "flex",
@@ -240,7 +276,7 @@ export const Profile = observer(() => {
           <Col lg={12} xs={24}>
             <Row>
               <Col span={12}>
-                <Text strong>Name</Text>
+                <Text strong>Nama</Text>
               </Col>
               <Col span={12}>
                 <Text>
@@ -248,7 +284,7 @@ export const Profile = observer(() => {
                 </Text>
               </Col>
               <Col span={12}>
-                <Text strong>Phone Number</Text>
+                <Text strong>No. Telepon</Text>
               </Col>
               <Col span={12}>
                 <Text>
@@ -268,7 +304,7 @@ export const Profile = observer(() => {
                 <Text>{store.authentication.profileData.roles?.name}</Text>
               </Col>
               <Col span={12}>
-                <Text strong>Superior</Text>
+                <Text strong>Upline</Text>
               </Col>
               <Col span={12}>
                 <Text>
@@ -357,12 +393,124 @@ export const Profile = observer(() => {
         </Row>
         <Row>
           <Col span={24}>
-            <div>
+            <Tabs defaultActiveKey="1">
-              <Title strong level={3}>
+              <TabPane tab="History Top Up" key="1">
-                History Transaction
-              </Title>
                 <Button
-                style={{ marginBottom: "1rem" }}
+                  style={{ marginBottom: "1rem", marginLeft: 5 }}
+                  onClick={() => {
+                    store.transaction.visibleModalFilterTransaction = true;
+                  }}
+                >
+                  <FilterOutlined />
+                  Filter
+                </Button>
+                {store.ui.mediaQuery.isDesktop && (
+                  <Table
+                    key="1"
+                    hasEmpty
+                    columns={column}
+                    dataSource={store.transaction.dataHistoryTopUpProfile}
+                    bordered
+                    pagination={{
+                      pageSize: store.transaction.pageSize,
+                      total: store.transaction.total_dataHistoryTopUpProfile,
+                      current: store.transaction.page + 1,
+                      showSizeChanger: true,
+                      simple: false,
+                    }}
+                    onChange={async (page) => {
+                      let pageNumber = page.current;
+                      store.transaction.pageSize = page.pageSize;
+                      store.transaction.page = pageNumber - 1;
+                      modalLoader.setLoading(true);
+                      await store.transaction.getDataHistoryTopUpProfile(
+                        store.authentication.profileData?.id
+                      );
+                      modalLoader.setLoading(false);
+                    }}
+                  />
+                )}
+                {store.ui.mediaQuery.isMobile && (
+                  <div>
+                    <List
+                      itemLayout="horizontal"
+                      position={"top"}
+                      dataSource={store.transaction.dataHistoryTopUpProfile}
+                      pagination={{
+                        onChange: async (page, pageSize) => {
+                          console.log(page, "Page");
+                          console.log(pageSize, "Page size");
+                          store.transaction.pageSize = pageSize;
+                          store.transaction.page = page - 1;
+                          modalLoader.setLoading(true);
+                          await store.transaction.getDataHistoryTopUpProfile(
+                            store.authentication.profileData?.id
+                          );
+                          modalLoader.setLoading(false);
+                        },
+                        pageSize: store.transaction.pageSize,
+                        total: store.transaction.total_dataHistoryTopUpProfile,
+                        current: store.transaction.page + 1,
+                        style: { marginBottom: "1rem", marginRight: "1rem" },
+                      }}
+                      style={{ padding: 0 }}
+                      renderItem={(item) => {
+                        return (
+                          <div>
+                            <List.Item
+                              key={item.id}
+                              style={{
+                                backgroundColor: "#ffffff",
+                                paddingTop: 0,
+                                paddingBottom: 0,
+                                display: "flex",
+                                flexDirection: "row",
+                                alignItems: "center",
+                                justifyContent: "center",
+                              }}
+                            >
+                              <List.Item.Meta
+                                className={["cariparkir-container"].join(" ")}
+                                title={item.id}
+                                description={
+                                  <div style={{}}>
+                                    <p>
+                                      <small>
+                                        Pengirim : {item.sender_name}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        Amount :{" "}
+                                        {new Intl.NumberFormat("id-ID", {
+                                          style: "currency",
+                                          currency: "IDR",
+                                        }).format(item.amount || 0)}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        Transaction Date :{" "}
+                                        {format(
+                                          parseISO(item.transaction_date),
+                                          "dd-MM-yyyy"
+                                        )}
+                                      </small>{" "}
+                                      <br />
+                                    </p>
+                                  </div>
+                                }
+                              />
+                            </List.Item>
+                            <Divider plain style={{ margin: 0 }} />
+                          </div>
+                        );
+                      }}
+                    />
+                  </div>
+                )}
+              </TabPane>
+              <TabPane tab="History Transaction" key="2">
+                <Button
+                  style={{ marginBottom: "1rem", marginLeft: 5 }}
                   onClick={() => {
                     store.transaction.visibleModalFilterTransaction = true;
                   }}
@@ -396,6 +544,7 @@ export const Profile = observer(() => {
                   />
                 )}
                 {store.ui.mediaQuery.isMobile && (
+                  <div>
                     <List
                       itemLayout="horizontal"
                       position={"top"}
@@ -404,7 +553,8 @@ export const Profile = observer(() => {
                         onChange: async (page, pageSize) => {
                           console.log(page, "Page");
                           console.log(pageSize, "Page size");
-                      store.transaction.pageSizeHistoryTransaction = pageSize;
+                          store.transaction.pageSizeHistoryTransaction =
+                            pageSize;
                           store.transaction.pageHistoryTransaction = page - 1;
                           modalLoader.setLoading(true);
                           await store.transaction.getDataHistoryTransaction();
@@ -459,10 +609,10 @@ export const Profile = observer(() => {
                                             }
                                           >
                                             {item.status === 1
-                                          ? "Success"
+                                              ? "Sukses"
                                               : item.status === 0
-                                          ? "Pending"
+                                              ? "Dalam Proses"
-                                          : "Failed"}
+                                              : "Gagal"}
                                           </Tag>
                                         }
                                       </small>{" "}
@@ -498,11 +648,12 @@ export const Profile = observer(() => {
                         );
                       }}
                     />
-              )}
                   </div>
+                )}
+              </TabPane>
+            </Tabs>
           </Col>
         </Row>
-        <div />
       </Card>
       <Modal
         visible={store.transaction.visibleModalFilterTransaction}

src/pages/Transaction/Product.js

@@ -189,7 +189,7 @@ export const Product = observer(() => {
       )}
       <Modal
         visible={visibleModalBuy}
-        title={`Are you sure buy ${barang?.product_name}?`}
+        title={`Apakah anda yakin membeli ${barang?.product_name}?`}
         okText={"Confirm"}
         onCancel={() => {
           form.resetFields();
@@ -208,10 +208,10 @@ export const Product = observer(() => {
               handleCancel();
             }}
           >
-            Cancel
+            Batal
           </Button>,
           <Button
-            key="Buy Prod"
+            key="Beli"
             style={{
               backgroundColor: "#4e79e7",
               color: "#fff",
@@ -229,10 +229,10 @@ export const Product = observer(() => {
                 });
             }}
           >
-            Buy Prod
+            Beli
           </Button>,
           <Button
-            key="Buy Stag"
+            key="Beli Stag"
             type="primary"
             onClick={() => {
               form
@@ -247,18 +247,18 @@ export const Product = observer(() => {
                 });
             }}
           >
-            Buy Staging
+            Beli Staging
           </Button>,
         ]}
       >
         <Form form={form} layout="vertical">
           <Form.Item
             name="destination"
-            label="Destination"
+            label="Nomor Tujuan"
             rules={[
               {
                 required: true,
-                message: "Please input Destination Number!",
+                message: "Tolong masukan nomor tujuan!",
               },
               // {
               //   pattern: /^(?:\d*)$/,

src/pages/Transaction/Transaction.js

@@ -10,6 +10,8 @@ import {
   Modal,
   Row,
   DatePicker,
+  Form,
+  Input,
 } from "antd";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { Product } from "./Product";
@@ -24,12 +26,16 @@ export const Transaction = observer(() => {
   const { Title } = Typography;
   const { Option } = Select;
   const modalLoader = useContext(ModalLoaderContext);
+  const [form] = Form.useForm();
+  const [visibleModalBuy, setVisibleModalBuy] = useState(false);
+  const [barang, setBarang] = useState({});
 
   useEffect(() => {
     const init = async () => {
       try {
         modalLoader.setLoading(true);
         await store.transaction.getDataCategories();
+        await store.transaction.getDataSubCategories();
         modalLoader.setLoading(false);
       } catch (e) {
         modalLoader.setLoading(false);
@@ -44,22 +50,96 @@ export const Transaction = observer(() => {
     init();
   }, []);
 
-  const handleChangeTabs = async (key) => {
+  const routeData = [
+    {
+      route: LINKS.TRANSACTION,
+      name: "Transaksi",
+    },
+  ];
+
+
+  const handleChangeTabs = async (item) => {
     modalLoader.setLoading(true);
     store.transaction.dataSubCategories = [];
     store.transaction.data = [];
     store.transaction.filterSubCategory = null;
-    store.transaction.filterCategory = key;
+    store.transaction.filterCategory = item;
     await store.transaction.getDataSubCategories();
     modalLoader.setLoading(false);
   };
 
-  const routeData = [
+  const handleChangeSubcategory = async (item) => {
-    {
+    store.transaction.filterSubCategory = item;
-      route: LINKS.TRANSACTION,
+    modalLoader.setLoading(true);
-      name: "Transaksi"
+    await store.transaction.getData();
-    },
+    modalLoader.setLoading(false);
-  ];
+  };
+
+
+  const handleBuyProduct = async (data, productCode) => {
+    modalLoader.setLoading(true);
+    try {
+      const response = await store.transaction.buyProd({
+        ...data,
+        productCode: productCode,
+      });
+
+      if (response.status === 201) {
+        message.success(response?.body?.message || "Berhasil Beli Produk");
+      } else {
+        message.error(response?.body?.error || "Gagal Beli Produk", 3);
+      }
+    } catch (e) {
+      console.log("testingan");
+      console.log(e.response, "testingan");
+      console.log(e.result, "testingan1");
+      if (e.response?.body?.error) {
+        message.error(e.response.body.error);
+        setVisibleModalBuy(false);
+        modalLoader.setLoading(false);
+        return;
+      }
+      console.log(e, "apa errornya");
+      message.error("Gagal Beli Product");
+    }
+    setVisibleModalBuy(false);
+    modalLoader.setLoading(false);
+  };
+
+  const handleBuyStag = async (data, productCode) => {
+    modalLoader.setLoading(true);
+    try {
+      const response = await store.transaction.buyProduct({
+        ...data,
+        productCode: productCode,
+      });
+      if (response.status === 201) {
+        message.success(response?.body?.message || "Berhasil Beli Produk");
+      } else {
+        message.error(response?.body?.error || "Gagal Beli Produk", 3);
+      }
+    } catch (e) {
+      console.log("testingan");
+      console.log(e.response, "testingan");
+      console.log(e.result, "testingan1");
+      if (e.response?.body?.error) {
+        message.error(e.response.body.error);
+        setVisibleModalBuy(false);
+        modalLoader.setLoading(false);
+        return;
+      }
+      console.log(e, "apa errornya");
+      message.error("Gagal Beli Product");
+    }
+    // setDataProd(false);
+    // setDataStag(false);
+    setVisibleModalBuy(false);
+    modalLoader.setLoading(false);
+  };
+  const handleCancel = () => {
+    form.resetFields();
+    setVisibleModalBuy(false);
+  };
 
   return (
     <div className={["ppob-container"].join(" ")}>
@@ -75,6 +155,7 @@ export const Transaction = observer(() => {
             Filter
           </Button> */}
         </Col>
+        {store.ui.mediaQuery.isDesktop && (
           <Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
             {store.transaction.dataCategories.map((item, index) => (
               <TabPane tab={item.name} key={item.id}>
@@ -82,6 +163,198 @@ export const Transaction = observer(() => {
               </TabPane>
             ))}
           </Tabs>
+        )}
+
+        {store.ui.mediaQuery.isMobile && (
+          <div>
+            <Row>
+              <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                Kategori
+              </span>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <Select
+                  placeholder={"Select Category"}
+                  allowClear={true}
+                  onChange={(val) => handleChangeTabs(val)}
+                  style={{ marginBottom: "10px", width: "100%" }}
+                >
+                  {store.transaction.dataCategories.map((item, index) => (
+                    <Option key={index} value={item.id}>
+                      {item.name}
+                    </Option>
+                  ))}
+                </Select>
+              </Col>
+            </Row>
+
+            <Row>
+              <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                Sub Category
+              </span>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <Select
+                  placeholder={"Select Sub Category"}
+                  allowClear={true}
+                  onChange={(val) => handleChangeSubcategory(val)}
+                  style={{ marginBottom: "10px", width: "100%" }}
+                  value={store.transaction.filterSubCategory}
+                >
+                  {store.transaction.dataSubCategories.map((item, index) => (
+                    <Option key={item.id} value={item.id}>
+                      {item.name}
+                    </Option>
+                  ))}
+                </Select>
+              </Col>
+            </Row>
+            <Row
+              justify={"center"}
+              align={"center"}
+              style={{ marginBottom: "1rem" }}
+            >
+              <Col
+                span={12}
+                style={{
+                  fontWeight: "bold",
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                Produk & Nominal
+              </Col>
+              <Col span={12} style={{ textAlign: "right" }}>
+                {/* <Search
+                  placeholder="input search text"
+                  style={{ width: 200, marginRight: 10 }}
+                /> */}
+              </Col>
+            </Row>
+            {store.transaction.data.length != 0 && (
+              <Row>
+                {store.transaction.data.map((item, index) => (
+                  <Col key={index} xs={24} md={16} lg={8}>
+                    <Card
+                      onClick={() => {
+                        setVisibleModalBuy(true);
+                        setBarang(item);
+                      }}
+                      hoverable
+                      style={{
+                        cursor: "pointer",
+                        marginLeft: 10,
+                        borderColor: "salmon",
+                        height: 100,
+                        marginBottom: 10,
+                      }}
+                    >
+                      <span style={{ color: "black" }}>
+                        {item?.product_name}
+                      </span>
+                      <br />
+                      <span style={{ color: "grey", fontSize: 10 }}>
+                        {new Intl.NumberFormat("id-ID", {
+                          style: "currency",
+                          currency: "IDR",
+                        }).format(item?.price)}
+                      </span>
+                    </Card>
+                  </Col>
+                ))}
+              </Row>
+            )}
+            <Modal
+              visible={visibleModalBuy}
+              title={`Apakah anda yakin membeli ${barang?.product_name}?`}
+              okText={"Confirm"}
+              onCancel={() => {
+                form.resetFields();
+                setVisibleModalBuy(false);
+              }}
+              // footer={footerLayoutFilter}
+              footer={[
+                <Button
+                  key="back"
+                  style={{
+                    backgroundColor: "#e74e5e",
+                    color: "#fff",
+                  }}
+                  onClick={() => {
+                    form.resetFields();
+                    handleCancel();
+                  }}
+                >
+                  Batal
+                </Button>,
+                <Button
+                  key="Beli"
+                  style={{
+                    backgroundColor: "#4e79e7",
+                    color: "#fff",
+                  }}
+                  onClick={() => {
+                    form
+                      .validateFields()
+                      .then((values) => {
+                        console.log(values, "isi form");
+                        handleBuyProduct(values, barang.product_code);
+                        form.resetFields();
+                      })
+                      .catch((info) => {
+                        console.error("Validate Failed:", info);
+                      });
+                  }}
+                >
+                  Beli
+                </Button>,
+                <Button
+                  key="Beli Stag"
+                  type="primary"
+                  onClick={() => {
+                    form
+                      .validateFields()
+                      .then((values) => {
+                        console.log(values, "isi form");
+                        handleBuyStag(values, barang.product_code);
+                        form.resetFields();
+                      })
+                      .catch((info) => {
+                        console.error("Validate Failed:", info);
+                      });
+                  }}
+                >
+                  Beli Staging
+                </Button>,
+              ]}
+            >
+              <Form form={form} layout="vertical">
+                <Form.Item
+                  name="destination"
+                  label="Nomor Tujuan"
+                  rules={[
+                    {
+                      required: true,
+                      message: "Tolong masukan nomor tujuan!",
+                    },
+                    // {
+                    //   pattern: /^(?:\d*)$/,
+                    //   message: "Value should contain just number",
+                    // },
+                    // {
+                    //   pattern: /^[\d]{1,12}$/,
+                    //   message: "Value should be 1 - 12 character",
+                    // },
+                  ]}
+                >
+                  <Input />
+                </Form.Item>
+              </Form>
+            </Modal>
+          </div>
+        )}
       </Card>
     </div>
   );

src/store/transaction.js

@@ -23,7 +23,7 @@ export class Transaction {
   pageSizeSubCategories = 10;
   dataSubCategories = [];
   total_dataSubCategories = 0;
-  filterSubCategory = null;
+  //filterSubCategory = null;
 
   pageHistoryTransaction = 0;
   pageSizeHistoryTransaction = 10;
@@ -40,6 +40,9 @@ export class Transaction {
   dataHistoryTopUp = [];
   total_dataHistoryTopUp = 0;
 
+  dataHistoryTopUpProfile = [];
+  total_dataHistoryTopUpProfile = 0;
+
   dataTransaction = [];
   dataTransactionB2B = [];
   dataTransactionPartner = [];
@@ -165,6 +168,19 @@ export class Transaction {
     }
   }
 
+  async getDataHistoryTopUpProfile(id) {
+    try {
+      const response = await http.get(
+        `/transaction/history-deposit-profile?page=${this.page}&pageSize=${this.pageSize}&user-destination=${id}&start=${this.filterStart}&end=${this.filterEnd}`
+      );
+      console.log(response,'get data history Profile')
+      this.dataHistoryTopUpProfile = response.body.data ?? [];
+      this.total_dataHistoryTopUpProfile = response?.body?.count ?? 0;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   async create(data) {
     try {
       const response = await http.post("/product").send(data);