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

src/component/CategoryComponent.js

@@ -195,9 +195,11 @@ export const CategoryComponent = observer((props) => {
                         margin: 0,
                       }}
                     >
+                      {store.authentication.userData.role === "Admin" && (
                         <Button onClick={() => handleEditButton(item)}>
                           Edit
                         </Button>
+                      )}
                     </p>
                   </div>
                 </List.Item>
@@ -209,8 +211,8 @@ export const CategoryComponent = observer((props) => {
       )}
       <Modal
         visible={store.category.visibleModalCategory}
-        title={idData ? "Edit Category" : "Create a new Category"}
+        title={idData ? "Edit Kategori" : "Buat Kategori Baru"}
-        okText={idData ? "Edit" : "Create"}
+        okText={idData ? "Edit" : "Buat"}
         cancelText="Batal"
         onCancel={() => {
           form.resetFields();

src/component/PartnerComponent.js

@@ -329,10 +329,10 @@ export const PartnerComponent = observer((props) => {
         visible={store.partner.visibleModalPartner}
         title={
           isChangePassword
-            ? "Change Member Password"
+            ? "Ganti Password Rekanan"
             : idData
-            ? "Edit Partner"
+            ? "Edit Rekanan"
-            : "Create a new partner"
+            : "Buat Rekanan Baru"
         }
         okText={idData ? "Edit" : "Create"}
         cancelText="Batal"

src/component/ProductComponent.js

@@ -33,6 +33,7 @@ export const ProductComponent = observer((props) => {
   const [filterSupplier, setFilterSupplier] = useState([]);
   const [filterSubCategories, setFilterSubCategories] = useState([]);
   const modalLoader = useContext(ModalLoaderContext);
+  const role = store.authentication.userData.role
 
   const handleEditButton = (data) => {
     console.log(data, "isi data");
@@ -61,8 +62,8 @@ export const ProductComponent = observer((props) => {
     },
     {
       title: "Harga Beli",
-      dataIndex: "current_price_price",
+      dataIndex: "price",
-      key: "current_price_price",
+      key: "price",
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
           style: "currency",
@@ -89,6 +90,26 @@ export const ProductComponent = observer((props) => {
           currency: "IDR",
         }).format(text),
     },
+    {
+      title: "Biaya Admin",
+      dataIndex: "admin_price",
+      key: "admin_price",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    {
+      title: "Fee Jual",
+      dataIndex: "partner_fee",
+      key: "partner_fee",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
     {
       title: "Supplier",
       dataIndex: "supplier_name",
@@ -115,6 +136,7 @@ export const ProductComponent = observer((props) => {
     {
       title: "Tindakan",
       key: "action",
+      fixed: 'right',
       render: (text, record) => (
         <Button
           onClick={async () => {
@@ -128,15 +150,16 @@ export const ProductComponent = observer((props) => {
       ),
     },
   ];
-  if (store.authentication.userData.role !== "Admin") columns.pop();
   //if (store.authentication.userData.role === "Admin Partner") delete columns[2];
+  if (store.authentication.userData.role === "Admin Partner") delete columns[10];
   if (store.authentication.userData.role === "Admin Partner") delete columns[3];
-  if (store.authentication.userData.role != "Admin Partner") delete columns[4];
+  if (store.authentication.userData.role !== "Admin Partner") delete columns[4];
+  if (store.authentication.userData.role !== "Admin") delete columns[9];
   if (store.authentication.userData.role !== "Admin") delete columns[6];
+  if (store.authentication.userData.role !== "Admin") delete columns[7];
   if (store.authentication.userData.role !== "Admin") delete columns[2];
-  if (store.authentication.userData.role !== "Admin") delete columns[5];
+  if (store.authentication.userData.role === "Admin Partner") delete columns[8];
-  if (store.authentication.userData.role === "Admin Partner") delete columns[7];
+  //if (store.authentication.userData.role !== "Admin") delete columns[8];
-  if (store.authentication.userData.role !== "Admin") delete columns[8];
   //if (store.authentication.userData.role === "Admin Partner") delete columns[5];
 
   const deleteData = async (id) => {
@@ -208,28 +231,36 @@ export const ProductComponent = observer((props) => {
   };
 
   const handleRemoveFilter = async () => {
+    store.product.pageProductPartner = 0
+    store.product.visibleModalFilterProduct = false;
     store.product.filterSupplier = null;
     store.product.filterSubCategory = null;
     setFilterSupplier([]);
     setFilterSubCategories([]);
-    await store.product.getData();
+    store.authentication.userData.role === "Admin Partner"
-    store.product.visibleModalFilterProduct = false;
+      ? await store.product.getProductPartner()
+      : await store.product.getData();
+    //await store.product.getData();
+    modalLoader.setLoading(false);
   };
 
   const handleCancelFilter = async () => {
-    store.product.filterSubCategory = null;
-    store.product.filterSupplier = null;
     store.product.visibleModalFilterProduct = false;
-    await store.product.getData();
+    //await store.product.getData();
   };
 
   const handleSubmitFilter = async () => {
+    store.product.pageProductPartner = 0
+    store.product.visibleModalFilterProduct = false;
     store.product.filterSupplier = filterSupplier;
     store.product.filterSubCategory = filterSubCategories;
     modalLoader.setLoading(true);
-    await store.product.getData();
+    store.authentication.userData.role === "Admin Partner"
+      ? await store.product.getProductPartner(filterSubCategories)
+      : await store.product.getData();
+    //await store.product.getData();
     modalLoader.setLoading(false);
-    store.product.visibleModalFilterProduct = false;
+    //store.product.page=1
   };
 
   const footerLayoutFilter = [
@@ -260,50 +291,47 @@ export const ProductComponent = observer((props) => {
 
   const handleClickRow = (record, index) => ({
     onClick: (event) => {
-      history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id));
+      history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id))
     },
   });
   return (
     <div>
       {store.ui.mediaQuery.isDesktop && (
         <Table
-          style={
+          style={{
-            store.authentication.userData.role === "Admin"
-              ? {
             cursor: "pointer",
             textAlign: "center",
             width: store.ui.mediaQuery.isMobile ? 250 : "",
-                }
+          }}
-              : {
+          scroll={role === "Admin Partner" ? false : { x: 1300 }}
-                  textAlign: "center",
-                  width: store.ui.mediaQuery.isMobile ? 250 : "",
-                }
-          }
           columns={columns}
           dataSource={
             store.authentication.userData.role === "Admin Partner"
               ? store.product.dataProductPartner
               : store.product.data
           }
-          onRow={
+          onRow={role === "Admin Partner" ? false : handleClickRow}
-            store.authentication.userData.role === "Admin" ? handleClickRow : ""
-          }
           pagination={{
-            pageSize: store.product.pageSize,
+            pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
             total:
               store.authentication.userData.role === "Admin Partner"
                 ? store.product.total_data_partner
                 : store.product.total_data,
-            current: store.product.page + 1,
+            current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
             showSizeChanger: true,
             simple: false,
           }}
           onChange={async (page) => {
             let pageNumber = page.current;
-            store.product.pageSize = page.pageSize;
+            store.authentication.userData.role === "Admin" ? store.product.pageSize = page.pageSize : store.product.pageSizeProductPartner = page.pageSize;
-            store.product.page = pageNumber - 1;
+            store.authentication.userData.role === "Admin" ? store.product.page = pageNumber - 1 : store.product.pageProductPartner = pageNumber - 1
+            store.product.filterSubCategory = filterSubCategories
             modalLoader.setLoading(true);
-            await store.product.getData();
+            store.authentication.userData.role === "Admin Partner"
+              ? await store.product.getProductPartner(
+                filterSubCategories
+              )
+              : await store.product.getData();
             modalLoader.setLoading(false);
           }}
         />
@@ -314,18 +342,29 @@ export const ProductComponent = observer((props) => {
           position={"top"}
           pagination={{
             onChange: async (page, pageSize) => {
-              store.product.pageSize = pageSize;
+              store.authentication.userData.role === "Admin" ? store.product.pageSize = pageSize : store.product.pageSizeProductPartner = pageSize;
-              store.product.page = page - 1;
+              store.authentication.userData.role === "Admin" ? store.product.page = page - 1 : store.product.pageProductPartner = page - 1
               modalLoader.setLoading(true);
-              await store.product.getData();
+              store.authentication.userData.role === "Admin Partner"
+                ? await store.product.getProductPartner(
+                  filterSubCategories
+                )
+                : await store.product.getData();
+              //await store.product.getData();
               modalLoader.setLoading(false);
             },
-            pageSize: store.product.pageSize,
+            pageSize: store.authentication.userData.role === "Admin" ? store.product.pageSize : store.product.pageSizeProductPartner,
-            total: store.product.total_data,
+            total: store.authentication.userData.role === "Admin Partner"
-            current: store.product.page + 1,
+              ? store.product.total_data_partner
+              : store.product.total_data,
+            current: store.authentication.userData.role === "Admin" ? store.product.page + 1 : store.product.pageProductPartner + 1,
             style: { marginBottom: "1rem", marginRight: "1rem" },
           }}
-          dataSource={store.product.data}
+          dataSource={
+            store.authentication.userData.role === "Admin Partner"
+              ? store.product.dataProductPartner
+              : store.product.data
+          }
           style={{ padding: 0 }}
           renderItem={(item) => {
             return (
@@ -352,6 +391,19 @@ export const ProductComponent = observer((props) => {
                           {/* <small>Harga Beli : {item.current_price_price}</small>
                           <br /> */}
                           <small>Harga Jual : {item.mark_up_price}</small>
+                          <br />
+                          <Button
+                            onClick={async () => {
+                              history.push(
+                                LINKS.PRODUCT_DETAIL.replace(
+                                  ":id",
+                                  item.product_id
+                                )
+                              );
+                            }}
+                          >
+                            Detail
+                          </Button>
                         </p>
                         <p></p>
                       </div>
@@ -452,8 +504,8 @@ export const ProductComponent = observer((props) => {
             rules={[{ required: true, message: "Please select Status!" }]}
           >
             <Select placeholder="Select Sub Category" allowClear>
-              <Option value="ACTIVE">ACTIVE</Option>
+              <Option value="ACTIVE">AKTIF</Option>
-              <Option value="INACTIVE">INACTIVE</Option>
+              <Option value="INACTIVE">INAKTIF</Option>
             </Select>
           </Form.Item>
           <Form.Item

src/component/SubcategoryComponent.js

@@ -200,9 +200,11 @@ export const SubcategoryComponent = observer((props) => {
                         margin: 0,
                       }}
                     >
+                      {store.authentication.userData.role === "Admin" && (
                         <Button onClick={() => handleEditButton(item)}>
                           Edit
                         </Button>
+                      )}
                     </p>
                   </div>
                 </List.Item>
@@ -214,8 +216,8 @@ export const SubcategoryComponent = observer((props) => {
       )}
       <Modal
         visible={store.subcategory.visibleModalSubcategory}
-        title={idData ? "Edit Sub Category" : "Create a new sub category"}
+        title={idData ? "Edit Sub Kategori" : "Buat Sub Kategori Baru"}
-        okText={idData ? "Edit" : "Create"}
+        okText={idData ? "Edit" : "Buat"}
         cancelText="Batal"
         onCancel={() => {
           form.resetFields();

src/component/SupplierComponent.js

@@ -183,7 +183,7 @@ export const SupplierComponent = observer((props) => {
           );
       } catch (e) {
         modalLoader.setLoading(false);
-        message.error(e.response?.body?.message || "Gagal Ubah Data Supplie");
+        message.error(e.response?.body?.message || "Gagal Ubah Data Supplier");
       }
 
       modalLoader.setLoading(false);
@@ -206,7 +206,11 @@ export const SupplierComponent = observer((props) => {
         console.log(e.response, "testingan");
         console.log(e.result, "testingan1");
         if (e.response?.body?.error) {
-          message.error(e.response.body.error);
+          message.error(
+            e.response.body.error
+              ? "Supplier Tersebut Sudah Terdaftar"
+              : e.response.body.error
+          );
           modalLoader.setLoading(false);
           store.supplier.visibleModalSupplier = false;
           return;
@@ -342,8 +346,8 @@ export const SupplierComponent = observer((props) => {
       )}
       <Modal
         visible={store.supplier.visibleModalSupplier}
-        title={idData ? "Edit Supplier" : "Create a new Supplier"}
+        title={idData ? "Edit Supplier" : "Buat Supplier Baru"}
-        okText={idData ? "Edit" : "Create"}
+        okText={idData ? "Edit" : "Buat"}
         cancelText="Batal"
         onCancel={() => {
           form.resetFields();
@@ -363,10 +367,45 @@ export const SupplierComponent = observer((props) => {
         }}
       >
         <Form form={form} layout="vertical">
+          <Form.Item
+            name="irs_id"
+            label="Id"
+            rules={[{ required: true, message: "Please input name!" }]}
+          >
+            <Input />
+          </Form.Item>
           <Form.Item
             name="name"
             label="Name"
-            rules={[{ required: true, message: "Please input name!" }]}
+            rules={[{ required: true, message: "Please input url!" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="url"
+            label="Url"
+            rules={[{ required: true, message: "Please input url!" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="irs_pin"
+            label="Pin"
+            rules={[{ required: true, message: "Please input url!" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="irs_user"
+            label="User"
+            rules={[{ required: true, message: "Please input url!" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="irs_pass"
+            label="Password"
+            rules={[{ required: true, message: "Please input url!" }]}
           >
             <Input />
           </Form.Item>

src/pages/App/DesktopLayout.js

@@ -1,7 +1,8 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useContext } from "react";
-import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
+import { Button, Drawer, Layout, Menu, Popover, Typography, Card } from "antd";
 import { MenuList } from "./MenuList";
 import { Link, useHistory } from "react-router-dom";
+import { ModalLoaderContext } from "../../utils/modal";
 import {
   AlipayOutlined,
   DatabaseOutlined,
@@ -37,11 +38,19 @@ const { Header, Content, Sider } = Layout;
 const { SubMenu } = Menu;
 
 export const DesktopLayout = observer(() => {
+  const modalLoader = useContext(ModalLoaderContext);
   let history = useHistory();
   const xl = useMediaQuery({ minWidth: 1024 });
   const store = useStore();
   const [clicked, setClicked] = useState(false);
 
+  useEffect(() => {
+    (async () => {
+      modalLoader.setLoading(true);
+      await Promise.allSettled([store.authentication.getProfile()]);
+      modalLoader.setLoading(false);
+    })();
+  }, []);
   return (
     <Layout
       theme={"light"}
@@ -312,7 +321,9 @@ 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 />
@@ -369,7 +380,6 @@ export const DesktopLayout = observer(() => {
         >
           {store.ui.mediaQuery.isMobile && (
             <div
-              className={store.ui.mediaQuery.isMobile ? "shadow" : null}
               style={{
                 top: 0,
                 left: 0,
@@ -392,8 +402,8 @@ export const DesktopLayout = observer(() => {
                   width: "100%",
                   paddingLeft: store.ui.mediaQuery.isMobile ? 10 : 20,
                   paddingRight: store.ui.mediaQuery.isMobile ? 0 : 20,
-                  paddingBottom: 4,
+
-                  marginTop: -5,
+                  marginTop: -20,
                 }}
               >
                 <Button
@@ -422,28 +432,29 @@ export const DesktopLayout = observer(() => {
                     paddingTop: 5,
                   }}
                 >
-                  {/*<img*/}
+                  {/* <img
-                  {/*    className={[classes.logoFull]}*/}
+                    className={[classes.logoFull]}
-                  {/*    style={{*/}
+                    style={{
-                  {/*        maxHeight: 18,*/}
+                      maxHeight: 18,
-                  {/*        maxWidth: 75,*/}
+                      maxWidth: 75,
-                  {/*    }}*/}
+                    }}
-                  {/*    src={parkirLogoFull}*/}
+                    src={parkirLogoFull}
-                  {/*/>*/}
+                  /> */}
-                  {/*<Paragraph*/}
+                  {/* <Paragraph
-                  {/*    style={{*/}
+                    style={{
-                  {/*        margin: "-5px 0px 0px 2px",*/}
+                     
-                  {/*        padding: 0,*/}
+                      padding: 0,
-                  {/*        lineHeight: "18px",*/}
+                      lineHeight: "18px",
-                  {/*        fontSize: 8,*/}
+                      fontSize: 8,
-                  {/*        fontWeight: 800,*/}
+                      fontWeight: 800,
-                  {/*        color: "#8c8c8c",*/}
+                      color: "#8c8c8c",
-                  {/*        textAlign: "center",*/}
+                     
-                  {/*    }}*/}
+                    }}
-                  {/*>*/}
+                  >
-                  {/*    {store.authentication.userData.role || "Apps"}*/}
+                    {store.authentication.userData.role || "Apps"}
-                  {/*</Paragraph>*/}
+                  </Paragraph> */}
                 </div>
+
                 <Popover
                   className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
                   autoAdjustOverflow={true}
@@ -494,9 +505,17 @@ export const DesktopLayout = observer(() => {
                   visible={clicked}
                   onVisibleChange={() => setClicked(!clicked)}
                 >
+                  {store.authentication.userData.role !== "Admin" &&
+                    store.authentication.userData.role !== "Customer Service" &&
+                    new Intl.NumberFormat("id-ID", {
+                      style: "currency",
+                      currency: "IDR",
+                    }).format(store.authentication.profileData?.wallet || 0)}
+
                   <Button
                     size={"default"}
                     type={store.ui.mediaQuery.isDesktop ? "" : "link"}
+                    title="tes"
                     style={{
                       marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
                     }}
@@ -546,6 +565,33 @@ export const DesktopLayout = observer(() => {
                   width: "100%",
                 }}
               ></div>
+              {store.authentication.userData.role !== "Admin" &&
+                store.authentication.userData.role !== "Customer Service" && (
+                  <Card
+                    size="small"
+                    title={
+                      <span
+                        style={{
+                          fontStyle: "bold",
+                          textAlign: "center",
+                        }}
+                      >
+                        Saldo :{" "}
+                        {new Intl.NumberFormat("id-ID", {
+                          style: "currency",
+                          currency: "IDR",
+                        }).format(
+                          store.authentication.profileData?.wallet || 0
+                        )}
+                      </span>
+                    }
+                    style={{
+                      marginRight: 10,
+                      width: 210,
+                      height: 31,
+                    }}
+                  ></Card>
+                )}
               <Popover
                 className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
                 autoAdjustOverflow={true}
@@ -600,11 +646,12 @@ export const DesktopLayout = observer(() => {
                   size={"default"}
                   type={store.ui.mediaQuery.isDesktop ? "" : "link"}
                   style={{
-                    marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
+                    marginRight: store.ui.mediaQuery.isDesktop ? 30 : 10,
+                    width: 50,
                   }}
                   icon={
                     store.ui.mediaQuery.isDesktop ? (
-                      <UserOutlined style={{ fontSize: "13px" }} />
+                      <UserOutlined style={{ fontSize: "15px" }} />
                     ) : (
                       <UserOutlined
                         style={{ fontSize: "13px", color: "#5b5b5b" }}

src/pages/App/MenuList.js

@@ -242,7 +242,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" && (
               <Menu.Item key="payback-from-user">
                 <Link to={LINKS.PAYBACK_CREATED}>
                   <FileProtectOutlined />

src/pages/Home/Home.js

@@ -80,7 +80,7 @@ export const Home = observer(() => {
                 height: 200,
                 marginBottom: 10,
                 borderColor: "salmon",
-                width: "45%",
+                width: "47%",
               }}
             >
               <Row>
@@ -154,7 +154,7 @@ export const Home = observer(() => {
                 height: 200,
                 marginBottom: 10,
                 borderColor: "salmon",
-                width: "45%",
+                width: "47%",
               }}
             >
               <Row>
@@ -238,7 +238,7 @@ export const Home = observer(() => {
                 height: 200,
                 marginBottom: 10,
                 borderColor: "salmon",
-                width: "45%",
+                width: "47%",
               }}
             >
               <Row>
@@ -262,7 +262,7 @@ export const Home = observer(() => {
                 height: 200,
                 marginBottom: 10,
                 borderColor: "salmon",
-                width: "45%",
+                width: "47%",
               }}
             >
               <Row>

src/pages/Membership/DetailUser.js

@@ -412,8 +412,8 @@ export const DetailUser = observer(() => {
             Detail User
           </Title>
           <Col
-            lg={store.authentication.userData.role === "Admin" ? 18 : 13}
+            lg={store.authentication.userData.role === "Admin" ? 18 : 17}
-            xs={store.authentication.userData.role === "Admin" ? 18 : 13}
+            xs={store.authentication.userData.role === "Admin" ? 18 : 17}
             style={{ textAlign: "right" }}
           >
             <Space
@@ -445,6 +445,7 @@ export const DetailUser = observer(() => {
                     onClick={() => {
                       setInitialData({
                         id: store.membership.dataDetail.id,
+                        code: store.membership.dataDetail.partner.code,
                         name: store.membership.dataDetail.userDetail.name,
                         username: store.membership.dataDetail.username,
                         identity_number:
@@ -558,6 +559,14 @@ export const DetailUser = observer(() => {
                   {store.authentication.dataProfit.userDetail?.identity_number}
                 </Text>
               </Col>
+              <Col span={12}>
+                <Text strong>Code</Text>
+              </Col>
+              <Col span={12}>
+                <Text>
+                  {store.authentication.dataProfit.partner?.code}
+                </Text>
+              </Col>
               <Col span={12}>
                 <Text strong>Status</Text>
               </Col>
@@ -741,6 +750,7 @@ export const DetailUser = observer(() => {
                       style={{ marginBottom: "1rem", marginLeft: 5 }}
                       onClick={() => {
                         store.transaction.visibleModalFilterTransaction = true;
+                        store.transaction.page=0;
                         setAction(true);
                       }}
                     >
@@ -777,6 +787,7 @@ export const DetailUser = observer(() => {
                       style={{ marginBottom: "1rem" }}
                       onClick={() => {
                         store.transaction.visibleModalFilterTransaction = true;
+                        store.transaction.page=0;
                         setAction(true);
                       }}
                     >
@@ -858,6 +869,7 @@ export const DetailUser = observer(() => {
                       style={{ marginBottom: "1rem", marginLeft: 5 }}
                       onClick={() => {
                         store.transaction.visibleModalFilterTransaction = true;
+                        store.transaction.page=0;
                       }}
                     >
                       <FilterOutlined />
@@ -897,6 +909,7 @@ export const DetailUser = observer(() => {
                       style={{ marginBottom: "1rem" }}
                       onClick={() => {
                         store.transaction.visibleModalFilterTransaction = true;
+                        store.transaction.page=0;
                       }}
                     >
                       <FilterOutlined />
@@ -938,7 +951,7 @@ export const DetailUser = observer(() => {
                               }}
                             >
                               <List.Item.Meta
-                                className={["cariparkir-container"].join(" ")}
+                                className={[""].join(" ")}
                                 title={item.name}
                                 description={
                                   <div style={{}}>

src/pages/Membership/Konfirmasi.js

@@ -236,7 +236,10 @@ export const Konfirmasi = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
         data={
-          store.authentication.userData.role === "Admin" ? routeData : dataRoute
+          store.authentication.userData.role === "Admin" ||
+          store.authentication.userData.role === "Customer Service"
+            ? routeData
+            : dataRoute
         }
       />
       <Card>

src/pages/Membership/Membership.js

@@ -201,6 +201,7 @@ export const Membership = observer(() => {
       key: "action",
       render: (text, record) => (
         <Space size="middle">
+          {store.authentication.userData.role !== "Customer Service" && (
             <Button
               onClick={() => {
                 setDestination(record?.id);
@@ -210,6 +211,7 @@ export const Membership = observer(() => {
             >
               <DownloadOutlined /> Top Up Saldo
             </Button>
+          )}
           <Button
             onClick={async () => {
               await store.transaction.getDataHistoryTopUp(record.id);
@@ -226,7 +228,7 @@ export const Membership = observer(() => {
     },
   ];
 
-  if (store.authentication.userData.role === "Customer Service") columns.pop();
+  //if (store.authentication.userData.role === "Customer Service") columns.pop();
   const routeData = [
     {
       route: LINKS.HOME,
@@ -299,13 +301,15 @@ export const Membership = observer(() => {
         const response = await store.membership.create(request);
         response?.body?.statusCode === 201 || response?.body?.statusCode === 200
           ? message.success(
-              response?.body?.message || "Berhasil Tambah Member Baru"
+              response?.body?.message
+                ? "Berhasil Tambah Member Baru"
+                : response?.body?.message
             )
-          : message.error(response?.body?.error || "Gagal");
+          : message.error("Username Tersebut Sudah Terdaftar");
         await getData();
       } catch (e) {
         console.log(e, "apa errornya");
-        message.error(e.response?.body?.message || "Gagal Tambah Member Baru");
+        message.error(e.response?.body?.error);
       }
       modalLoader.setLoading(false);
       setConfirmLoading(false);
@@ -319,7 +323,10 @@ export const Membership = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
         data={
-          store.authentication.userData.role === "Admin" ? routeData : dataRoute
+          store.authentication.userData.role === "Admin" ||
+          store.authentication.userData.role === "Customer Service"
+            ? routeData
+            : dataRoute
         }
       />
       <Card>
@@ -330,6 +337,7 @@ export const Membership = observer(() => {
                 <Button
                   onClick={() => {
                     store.membership.visibleModalFilterMembership = true;
+                    store.membership.page = 0;
                   }}
                 >
                   <FilterOutlined />
@@ -446,6 +454,8 @@ export const Membership = observer(() => {
                               <small>Username : {item.username}</small> <br />
                               <small>Role : {item.roles?.name}</small> <br />
                               <small>Saldo : {item.coa?.amount}</small> <br />
+                              {store.authentication.userData.role !==
+                                "Customer Service" && (
                                 <Button
                                   style={{ marginRight: 10, marginTop: 7 }}
                                   onClick={() => {
@@ -456,6 +466,7 @@ export const Membership = observer(() => {
                                 >
                                   <DownloadOutlined /> Top Up Saldo
                                 </Button>
+                              )}
                               <Button
                                 onClick={async () => {
                                   await store.transaction.getDataHistoryTopUp(
@@ -588,7 +599,7 @@ export const Membership = observer(() => {
           </Col>
           <Col span={24}>
             <Title level={5} type={"secondary"} strong>
-              Type
+              Tipe
             </Title>
             <Select
               mode={"multiple"}

src/pages/Membership/MembershipModal.js

@@ -189,10 +189,10 @@ export const MembershipModal = ({
       visible={visible}
       title={
         initialData.isChangePassword
-          ? "Change Member Password"
+          ? "Ganti Password Anggota"
           : initialData.id
-          ? "Edit Member"
+          ? "Edit Anggota"
-          : "Create a new Membership"
+          : "Buat Anggota Baru"
       }
       okText={initialData.id ? "Edit" : "Create"}
       cancelText="Batal"

src/pages/Payback/Payback.js

@@ -35,7 +35,6 @@ import { capitalize } from "lodash";
 import { PAYBACK_STATUS } from "../../constants/payback";
 import moment from "moment";
 
-
 export const Payback = observer(() => {
   const { Option } = Select;
   const { Title } = Typography;
@@ -274,7 +273,10 @@ export const Payback = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
         data={
-          store.authentication.userData.role === "Admin" ? routeData : dataRoute
+          store.authentication.userData.role === "Admin" ||
+          store.authentication.userData.role === "Customer Service"
+            ? routeData
+            : dataRoute
         }
       />
       <Card>

src/pages/Payback/PaybackCreated.js

@@ -117,14 +117,14 @@ export const PaybackCreated = observer(() => {
     },
     {
       route: LINKS.PAYBACK_CREATED,
-      name: <span style={{ fontWeight: "bold" }}>Buat Pembayaran</span>,
+      name: <span style={{ fontWeight: "bold" }}>Bukti Pembayaran</span>,
     },
   ];
 
   const dataRoute = [
     {
       route: LINKS.PAYBACK_CREATED,
-      name: "Buat Pembayaran",
+      name: "Bukti Pembayaran",
     },
   ];
 

src/pages/Payback/PaybackModal.js

@@ -98,8 +98,8 @@ export const PaybackModal = ({ initialData }) => {
   return (
     <Modal
       visible={store.payback.visibleModalPayback}
-      title={"Create a new Created"}
+      title={"Buat Pembayaran Baru"}
-      okText={"Create"}
+      okText={"Buat"}
       cancelText="Batal"
       onCancel={handleCancel}
       onOk={() => {

src/pages/Product/Product.js

@@ -183,7 +183,8 @@ export const Product = observer(() => {
       <BreadcumbComponent
         data={
           store.authentication.userData.role === "Admin" ||
-          store.authentication.userData.role === "Admin Partner"
+            store.authentication.userData.role === "Admin Partner" ||
+            store.authentication.userData.role === "Customer Service"
             ? routeData
             : dataRoute
         }
@@ -195,6 +196,7 @@ export const Product = observer(() => {
               <Button
                 onClick={() => {
                   store.product.visibleModalFilterProduct = true;
+                  store.product.page = 0;
                 }}
               >
                 <FilterOutlined />
@@ -248,8 +250,8 @@ export const Product = observer(() => {
 
       <Modal
         visible={visibleModalUpload}
-        title={"Upload Excel Product"}
+        title={"Upload Excel Produk"}
-        okText={"Create"}
+        okText={"Buat"}
         cancelText="Batal"
         onCancel={() => {
           form.resetFields();

src/pages/Product/ProductDetail.js

@@ -1,5 +1,15 @@
 import React, { useContext, useEffect } from "react";
-import { Card, Col, Row, Table, Typography, Tag } from "antd";
+import {
+  Card,
+  Col,
+  Row,
+  Table,
+  Typography,
+  Tag,
+  List,
+  Button,
+  Divider,
+} from "antd";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -62,6 +72,25 @@ export const ProductDetail = observer(() => {
           currency: "IDR",
         }).format(text),
     },
+    {
+      title: "Biaya Admin",
+      dataIndex: "admin_price",
+      key: "admin_price",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    }, {
+      title: "Partner fee",
+      dataIndex: "partner_fee",
+      key: "partner_fee",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
     {
       title: "Tanggal Berlaku",
       dataIndex: "startDate",
@@ -101,7 +130,7 @@ export const ProductDetail = observer(() => {
     : null;
 
   return (
-    <div className={[""].join(" ")}>
+    <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
         <Title strong>Product Detail</Title>
@@ -141,6 +170,7 @@ export const ProductDetail = observer(() => {
               <Title strong level={3}>
                 Product Price History
               </Title>
+              {store.ui.mediaQuery.isDesktop && (
                 <Table
                   columns={columns}
                   dataSource={store.product.dataPriceHistory}
@@ -161,6 +191,117 @@ export const ProductDetail = observer(() => {
                     modalLoader.setLoading(false);
                   }}
                 />
+              )}
+              {store.ui.mediaQuery.isMobile && (
+                <List
+                  itemLayout="horizontal"
+                  position={"top"}
+                  pagination={{
+                    onChange: async (page, pageSize) => {
+                      store.product.pageSizePriceHistory = pageSize;
+                      store.product.pagePriceHistory = page - 1;
+                      modalLoader.setLoading(true);
+                      await store.product.getPriceHistoryByProduct(id);
+                      modalLoader.setLoading(false);
+                    },
+                    pageSize: store.product.pageSizePriceHistory,
+                    total: store.product.totalDataPriceHistory,
+                    current: store.product.pagePriceHistory + 1,
+                    style: { marginBottom: "1rem", marginRight: "1rem" },
+                  }}
+                  dataSource={store.product.dataPriceHistory}
+                  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={[""].join(" ")}
+                            //title={item.mark_up_price}
+                            description={
+                              <div style={{}}>
+                                <p>
+                                  <small>
+                                    Markup Price :{" "}
+                                    {new Intl.NumberFormat("id-ID", {
+                                      style: "currency",
+                                      currency: "IDR",
+                                    }).format(item.mark_up_price)}
+                                  </small>{" "}
+                                  <br />
+                                  <small>
+                                    Price:{" "}
+                                    {new Intl.NumberFormat("id-ID", {
+                                      style: "currency",
+                                      currency: "IDR",
+                                    }).format(item.price)}
+                                  </small>{" "}
+                                  <br />
+                                  <small>
+                                    {" "}
+                                    Tanggal Berlaku :
+                                    {item.startDate
+                                      ? format(
+                                        parseISO(item.startDate),
+                                        "dd MMMM yyyy"
+                                      )
+                                      : "-"}
+                                  </small>{" "}
+                                  <br />
+                                  <small>
+                                    Tanggal Berakhir :{" "}
+                                    {item.endDate
+                                      ? format(
+                                        parseISO(item.endDate),
+                                        "dd MMMM yyyy"
+                                      )
+                                      : "Sampai Sekarang"}
+                                  </small>{" "}
+                                  <br />
+                                </p>
+                                <p></p>
+                              </div>
+                            }
+                          />
+                          {/* <div style={{ marginRight: 16 }}>
+                            <p
+                              style={{
+                                fontSize: 9,
+                                margin: 0,
+                              }}
+                            >
+                              <Tag
+                                color={
+                                  item?.product_status === "ACTIVE"
+                                    ? "blue"
+                                    : "#E3E8EE"
+                                }
+                                style={{ color: "#4F566B" }}
+                              >
+                                {item?.product_status === "ACTIVE"
+                                  ? " Tersedia"
+                                  : "Tidak"}
+                              </Tag>
+                            </p>
+                          </div> */}
+                        </List.Item>
+                        <Divider plain style={{ margin: 0 }} />
+                      </div>
+                    );
+                  }}
+                />
+              )}
             </div>
           </Col>
         </Row>

src/pages/Profile/Profile.js

@@ -15,6 +15,8 @@ import {
   Image,
   Tag,
   Tabs,
+  Space,
+  message,
 } from "antd";
 import moment from "moment";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -37,6 +39,7 @@ export const Profile = observer(() => {
   const [filterStart, setFilterStart] = useState([]);
   const [filterEnd, setFilterEnd] = useState([]);
   const [actionFilter, setAction] = useState(false);
+  const [visible, setVisible] = useState(false);
 
   const routeData = [
     {
@@ -63,13 +66,14 @@ export const Profile = observer(() => {
       await Promise.allSettled([
         store.authentication.getProfile(),
         store.transaction.getDataHistoryTransaction(),
+        store.transaction.getDataHistoryCheckBill(),
       ]);
       await store.transaction.getDataHistoryTopUpProfile(
         store.authentication.profileData?.id
       );
       modalLoader.setLoading(false);
     })();
-  }, []);
+  }, [store.transaction.filterStart, store.transaction.filterEnd]);
 
   const handleRemoveFilter = async () => {
     store.transaction.filterStart = null;
@@ -78,11 +82,11 @@ export const Profile = observer(() => {
     setFilterStart([]);
     setFilterEnd([]);
     //await store.transaction.getDataHistoryTransaction();
-    actionFilter === true
+    // actionFilter === true
-      ? await store.transaction.getDataHistoryTopUpProfile(
+    //   ? await store.transaction.getDataHistoryTopUpProfile(
-          store.authentication.profileData?.id
+    //     store.authentication.profileData?.id
-        )
+    //   )
-      : await store.transaction.getDataHistoryTransaction();
+    //   : await store.transaction.getDataHistoryTransaction();
     store.transaction.visibleModalFilterTransaction = false;
     setAction(false);
   };
@@ -92,11 +96,11 @@ export const Profile = observer(() => {
     //form.resetFields();
     store.transaction.filterEnd = null;
     store.transaction.visibleModalFilterTransaction = false;
-    actionFilter === true
+    // actionFilter === true
-      ? await store.transaction.getDataHistoryTopUpProfile(
+    //   ? await store.transaction.getDataHistoryTopUpProfile(
-          store.authentication.profileData?.id
+    //     store.authentication.profileData?.id
-        )
+    //   )
-      : await store.transaction.getDataHistoryTransaction();
+    //   : await store.transaction.getDataHistoryTransaction();
     setAction(false);
     //await store.transaction.getDataHistoryTransaction();
   };
@@ -110,14 +114,14 @@ export const Profile = observer(() => {
       "YYYY-MM-DD HH:mm:ss"
     );
     modalLoader.setLoading(true);
-    actionFilter === true
+    // actionFilter === true
-      ? await store.transaction.getDataHistoryTopUpProfile(
+    //   ? await store.transaction.getDataHistoryTopUpProfile(
-          store.authentication.profileData?.id
+    //     store.authentication.profileData?.id
-        )
+    //   )
-      : await store.transaction.getDataHistoryTransaction();
+    //   : await store.transaction.getDataHistoryTransaction();
     modalLoader.setLoading(false);
-    store.transaction.filterStart = null;
+    // store.transaction.filterStart = null;
-    store.transaction.filterEnd = null;
+    // store.transaction.filterEnd = null;
     //form.resetFields();
     store.transaction.visibleModalFilterTransaction = false;
     setAction(false);
@@ -257,12 +261,87 @@ export const Profile = observer(() => {
       render: (text, record) => {
         return (
           <Text>
-            {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
+            {format(parseISO(record.transaction_date), "dd MMMM yyyy HH:mm:ss")}
           </Text>
         );
       },
     },
   ];
+
+  const columnBill = [
+    {
+      title: "Code Product",
+      dataIndex: "product_code",
+      key: "product_code",
+    },
+    {
+      title: "Admin Price",
+      dataIndex: "admin_price",
+      key: "admin_price",
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    {
+      title: "Tagihan Postpaid",
+      dataIndex: "amount",
+      key: "amount",
+    },
+    {
+      title: "Nomor tujuan",
+      dataIndex: "destination",
+      key: "destination",
+    },
+    {
+      title: "Transaction Id",
+      dataIndex: "trx_id",
+      key: "trx_id",
+    },
+    {
+      title: "Partner Transaction Id",
+      dataIndex: "partner_trx_id",
+      key: "partner_trx_id",
+    },
+    {
+      title: "Tanggal Transaksi",
+      dataIndex: "createdAt",
+      key: "createdAt",
+      render: (text, record) => {
+        return (
+          <Text>
+            {format(parseISO(record.createdAt), "dd MMMM yyyy HH:mm:ss")}
+          </Text>
+        );
+      },
+    },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+      render: (text, record) => {
+        console.log("status", record)
+        return (
+          <Tag
+            color={
+              record.status === "SUCCESS"
+                ? "success"
+                : record.status === 0
+                  ? "warning"
+                  : "processing"
+            }
+          >
+            {record.status === "SUCCESS"
+              ? "Sukses"
+              : record.status === 0
+                ? "Dalam Proses"
+                : "Gagal"}
+          </Tag>
+        );
+      },
+    },
+  ];
   const styleSaldoTitle = store.ui.mediaQuery.isDesktop
     ? {
       display: "flex",
@@ -277,18 +356,36 @@ export const Profile = observer(() => {
     }
     : null;
 
+  const handleSubmit = async (id, data) => {
+    try {
+      modalLoader.setLoading(true);
+      const response = await store.membership.changePassword(id, data);
+      console.log(id, "id yang masuk");
+      console.log(data, "data yang masuk");
+      message.success(response?.body?.message || "Berhasil Ganti Password");
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error(e.response?.body?.message || "Gagal Ganti Password");
+    }
+
+    modalLoader.setLoading(false);
+    setVisible(false);
+    form.resetFields();
+  };
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
         data={
           store.authentication.userData.role === "Admin" ||
-          store.authentication.userData.role === "Admin Partner"
+            store.authentication.userData.role === "Admin Partner" ||
+            store.authentication.userData.role === "Customer Service"
             ? routeData
             : dataRoute
         }
       />
       <Card>
         <Title strong>Profile</Title>
+
         <Row style={{ marginBottom: 20 }}>
           <Col lg={12} xs={24}>
             <Row>
@@ -407,6 +504,20 @@ export const Profile = observer(() => {
                 </Row>
               </Col>
             )}
+          {store.authentication.userData.role === "Retail" && (
+            <Button
+              onClick={() => {
+                console.log(store.authentication.profileData?.id, "id nya");
+                console.log(
+                  store.authentication.profileData?.userDetail.id,
+                  "id member"
+                );
+                setVisible(true);
+              }}
+            >
+              Ganti Password
+            </Button>
+          )}
         </Row>
         <Row>
           <Col span={24}>
@@ -416,6 +527,7 @@ export const Profile = observer(() => {
                   style={{ marginBottom: "1rem", marginLeft: 5 }}
                   onClick={() => {
                     store.transaction.visibleModalFilterTransaction = true;
+                    store.transaction.page = 0;
                     setAction(true);
                   }}
                 >
@@ -531,6 +643,7 @@ export const Profile = observer(() => {
                   style={{ marginBottom: "1rem", marginLeft: 5 }}
                   onClick={() => {
                     store.transaction.visibleModalFilterTransaction = true;
+                    store.transaction.page = 0;
                   }}
                 >
                   <FilterOutlined />
@@ -544,17 +657,16 @@ export const Profile = observer(() => {
                     //scroll={{ x: 1500, y: 300 }}
                     dataSource={store.transaction.dataHistoryTransaction}
                     pagination={{
-                      pageSize: store.transaction.pageSizeHistoryTransaction,
+                      pageSize: store.transaction.pageSize,
                       total: store.transaction.total_dataHistoryTransaction,
-                      current: store.transaction.pageHistoryTransaction + 1,
+                      current: store.transaction.page + 1,
                       showSizeChanger: true,
                       simple: false,
                     }}
                     onChange={async (page) => {
                       let pageNumber = page.current;
-                      store.transaction.pageSizeHistoryTransaction =
+                      store.transaction.pageSize = page.pageSize;
-                        page.pageSize;
+                      store.transaction.page = pageNumber - 1;
-                      store.transaction.pageHistoryTransaction = pageNumber - 1;
                       modalLoader.setLoading(true);
                       await store.transaction.getDataHistoryTransaction();
                       modalLoader.setLoading(false);
@@ -569,18 +681,15 @@ export const Profile = observer(() => {
                       dataSource={store.transaction.dataHistoryTransaction}
                       pagination={{
                         onChange: async (page, pageSize) => {
-                          console.log(page, "Page");
+                          store.transaction.page = pageSize;
-                          console.log(pageSize, "Page size");
+                          store.transaction.page = page - 1;
-                          store.transaction.pageSizeHistoryTransaction =
-                            pageSize;
-                          store.transaction.pageHistoryTransaction = page - 1;
                           modalLoader.setLoading(true);
                           await store.transaction.getDataHistoryTransaction();
                           modalLoader.setLoading(false);
                         },
-                        pageSize: store.transaction.pageSizeHistoryTransaction,
+                        pageSize: store.transaction.pageSize,
                         total: store.transaction.total_dataHistoryTransaction,
-                        current: store.transaction.pageHistoryTransaction + 1,
+                        current: store.transaction.page + 1,
                         style: { marginBottom: "1rem", marginRight: "1rem" },
                       }}
                       style={{ padding: 0 }}
@@ -669,6 +778,118 @@ export const Profile = observer(() => {
                   </div>
                 )}
               </TabPane>
+              <TabPane tab="Riwayat Check Bill" key="3">
+                <Button
+                  style={{ marginBottom: "1rem", marginLeft: 5 }}
+                  onClick={() => {
+                    store.transaction.visibleModalFilterTransaction = true;
+                    store.transaction.page = 0;
+                    setAction(true);
+                  }}
+                >
+                  <FilterOutlined />
+                  Filter
+                </Button>
+                {store.ui.mediaQuery.isDesktop && (
+                  <Table
+                    key="1"
+                    hasEmpty
+                    columns={columnBill}
+                    dataSource={store.transaction.dataHistorybillProfile}
+                    bordered
+                    pagination={{
+                      pageSize: store.transaction.pageSize,
+                      total: store.transaction.total_dataHistorybillProfile,
+                      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.getDataHistoryCheckBill();
+                      modalLoader.setLoading(false);
+                    }}
+                  />
+                )}
+                {store.ui.mediaQuery.isMobile && (
+                  <div>
+                    <List
+                      itemLayout="horizontal"
+                      position={"top"}
+                      dataSource={store.transaction.dataHistorybillProfile}
+                      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.getDataHistoryCheckBill();
+                          modalLoader.setLoading(false);
+                        },
+                        pageSize: store.transaction.pageSize,
+                        total: store.transaction.total_dataHistorybillProfile,
+                        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>
             </Tabs>
           </Col>
         </Row>
@@ -710,6 +931,46 @@ export const Profile = observer(() => {
           </Col>
         </Row>
       </Modal>
+
+      <Modal
+        visible={visible}
+        title={"Ganti Password"}
+        okText={"Ganti"}
+        cancelText="Batal"
+        onCancel={() => {
+          form.resetFields();
+          //handleCancelTransaction();
+          setVisible(false);
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(store.authentication.profileData?.id, "id pass");
+              console.log(values, "id data");
+              console.log(store.membership.dataDetail.id, "id member");
+              handleSubmit(store.authentication.profileData?.id, values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          initialValues={{ id: store.authentication.profileData?.id }}
+        >
+          <Form.Item
+            name="password"
+            label="Password"
+            rules={[{ required: false, message: "Please input password!" }]}
+          >
+            <Input.Password />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   );
 });

src/pages/Transaction/Product.js

@@ -215,6 +215,7 @@ export const Product = observer(() => {
             style={{
               backgroundColor: "#4e79e7",
               color: "#fff",
+              marginRight:10
             }}
             onClick={() => {
               form
@@ -231,24 +232,24 @@ export const Product = observer(() => {
           >
             Beli
           </Button>,
-          <Button
+          // <Button
-            key="Beli Stag"
+          //   key="Beli Stag"
-            type="primary"
+          //   type="primary"
-            onClick={() => {
+          //   onClick={() => {
-              form
+          //     form
-                .validateFields()
+          //       .validateFields()
-                .then((values) => {
+          //       .then((values) => {
-                  console.log(values, "isi form");
+          //         console.log(values, "isi form");
-                  handleBuyStag(values, barang.product_code);
+          //         handleBuyStag(values, barang.product_code);
-                  form.resetFields();
+          //         form.resetFields();
-                })
+          //       })
-                .catch((info) => {
+          //       .catch((info) => {
-                  console.error("Validate Failed:", info);
+          //         console.error("Validate Failed:", info);
-                });
+          //       });
-            }}
+          //   }}
-          >
+          // >
-            Beli Staging
+          //   Beli Staging
-          </Button>,
+          // </Button>,
         ]}
       >
         <Form form={form} layout="vertical">

src/pages/Transaction/Transaction.js

@@ -1,4 +1,4 @@
-import React, { message, useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useStore } from "../../utils/useStore";
 import {
   Card,
@@ -11,8 +11,10 @@ import {
   Row,
   DatePicker,
   Form,
-  Input,
+  message,
+  Input
 } from "antd";
+
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { Product } from "./Product";
 import { LINKS } from "../../routes/app";
@@ -89,6 +91,7 @@ export const Transaction = observer(() => {
       } else {
         message.error(response?.body?.error || "Gagal Beli Produk", 3);
       }
+      setVisibleModalBuy(false);
     } catch (e) {
       console.log("testingan");
       console.log(e.response, "testingan");
@@ -102,40 +105,43 @@ export const Transaction = observer(() => {
       console.log(e, "apa errornya");
       message.error("Gagal Beli Product");
     }
+   // message.success("Berhasil Beli Produk");
     setVisibleModalBuy(false);
     modalLoader.setLoading(false);
   };
 
-  const handleBuyStag = async (data, productCode) => {
+  // const handleBuyStag = async (data, productCode) => {
-    modalLoader.setLoading(true);
+  //   modalLoader.setLoading(true);
-    try {
+  //   try {
-      const response = await store.transaction.buyProduct({
+  //     const response = await store.transaction.buyProduct({
-        ...data,
+  //       ...data,
-        productCode: productCode,
+  //       productCode: productCode,
-      });
+  //     });
-      if (response.status === 201) {
+  //     if (response.status === 201) {
-        message.success(response?.body?.message || "Berhasil Beli Produk");
+  //       message.success(response?.body?.message || "Berhasil Beli Produk");
-      } else {
+  //     } else {
-        message.error(response?.body?.error || "Gagal Beli Produk", 3);
+  //       message.error(response?.body?.error || "Gagal Beli Produk", 3);
-      }
+  //     }
-    } catch (e) {
+  //   } catch (e) {
-      console.log("testingan");
+  //     console.log("testingan");
-      console.log(e.response, "testingan");
+  //     console.log(e.response, "testingan");
-      console.log(e.result, "testingan1");
+  //     console.log(e.result, "testingan1");
-      if (e.response?.body?.error) {
+  //     if (e.response?.body?.error) {
-        message.error(e.response.body.error);
+  //       message.error(e.response.body.error);
-        setVisibleModalBuy(false);
+  //       setVisibleModalBuy(false);
-        modalLoader.setLoading(false);
+  //       modalLoader.setLoading(false);
-        return;
+  //       return;
-      }
+  //     }
-      console.log(e, "apa errornya");
+  //     console.log(e, "apa errornya");
-      message.error("Gagal Beli Product");
+  //     message.error("Gagal Beli Product");
-    }
+  //   }
-    // setDataProd(false);
+  //   // setDataProd(false);
-    // setDataStag(false);
+  //   // setDataStag(false);
-    setVisibleModalBuy(false);
+  //   setVisibleModalBuy(false);
-    modalLoader.setLoading(false);
+  //   modalLoader.setLoading(false);
-  };
+  // };
+
+
   const handleCancel = () => {
     form.resetFields();
     setVisibleModalBuy(false);
@@ -241,6 +247,7 @@ export const Transaction = observer(() => {
                       onClick={() => {
                         setVisibleModalBuy(true);
                         setBarang(item);
+                        console.log(item?.product_name)
                       }}
                       hoverable
                       style={{
@@ -294,6 +301,7 @@ export const Transaction = observer(() => {
                   style={{
                     backgroundColor: "#4e79e7",
                     color: "#fff",
+                    marginRight:10
                   }}
                   onClick={() => {
                     form
@@ -310,24 +318,24 @@ export const Transaction = observer(() => {
                 >
                   Beli
                 </Button>,
-                <Button
+                // <Button
-                  key="Beli Stag"
+                //   key="Beli Stag"
-                  type="primary"
+                //   type="primary"
-                  onClick={() => {
+                //   onClick={() => {
-                    form
+                //     form
-                      .validateFields()
+                //       .validateFields()
-                      .then((values) => {
+                //       .then((values) => {
-                        console.log(values, "isi form");
+                //         console.log(values, "isi form");
-                        handleBuyStag(values, barang.product_code);
+                //         handleBuyStag(values, barang.product_code);
-                        form.resetFields();
+                //         form.resetFields();
-                      })
+                //       })
-                      .catch((info) => {
+                //       .catch((info) => {
-                        console.error("Validate Failed:", info);
+                //         console.error("Validate Failed:", info);
-                      });
+                //       });
-                  }}
+                //   }}
-                >
+                // >
-                  Beli Staging
+                //   Beli Staging
-                </Button>,
+                // </Button>,
               ]}
             >
               <Form form={form} layout="vertical">

src/store/product.js

@@ -28,6 +28,7 @@ export class Product {
     totalDataPriceHistory = 0;
     pagePriceHistory = 0;
     pageProductPartner = 0;
+    pageSizeProductPartner = 10
     pageSizePriceHistory = 10
 
     dataDetailProduct = {};
@@ -54,6 +55,7 @@ export class Product {
         }
     }
 
+
     async getDataSubCategories() {
         try {
             const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
@@ -99,14 +101,27 @@ export class Product {
     }
 
     async getProductPartner(id) {
+        console.log({ id });
+        if (id === undefined) {
             try {
-            const response = await http.get(`/product/by-categories?page=${this.pageProductPartner}&pageSize=10&sub-category=${id}`);
+                const response = await http.get(`/product/by-categories?page=${this.pageProductPartner}&pageSize=${this.pageSizeProductPartner}&sub-category=`);
                 console.log(response)
                 this.dataProductPartner = response.body.data
                 this.total_data_partner = response?.body?.count ?? 0
             } catch (e) {
                 console.error(e);
             }
+        } else {
+            try {
+                const response = await http.get(`/product/by-categories?page=${this.pageProductPartner}&pageSize=${this.pageSizeProductPartner}&sub-category=${id}`);
+                console.log(response)
+                this.dataProductPartner = response.body.data
+                this.total_data_partner = response?.body?.count ?? 0
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
     }
 
     async create(data) {

src/store/transaction.js

@@ -40,6 +40,9 @@ export class Transaction {
   dataHistoryTopUp = [];
   total_dataHistoryTopUp = 0;
 
+  dataHistorybillProfile = [];
+  total_dataHistorybillProfile = 0;
+
   dataHistoryTopUpProfile = [];
   total_dataHistoryTopUpProfile = 0;
 
@@ -130,15 +133,31 @@ export class Transaction {
     }
   }
 
+  async getDataHistoryCheckBill() {
+    try {
+      const response = await http.get(
+        `/transaction/check-bill-history`
+      );
+      // const response = await http.get(
+      //   `/transaction/check-bill-history?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}`
+      // );
+      console.log("bill", response);
+      this.dataHistorybillProfile = response.body.data ?? [];
+      this.total_dataHistorybillProfile = response?.body?.count ?? 0;
+      console.log(this.total_dataHistorybillProfile)
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   async getDataHistoryTransaction() {
     try {
       const response = await http.get(
-        `/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}&start=${this.filterStart}&end=${this.filterEnd}`
+        `/transaction/history?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}`
       );
       console.log(response);
       this.dataHistoryTransaction = response.body.data ?? [];
       this.total_dataHistoryTransaction = response?.body?.count ?? 0;
-      console.log(this.total_dataHistoryTransaction)
     } catch (e) {
       console.error(e);
     }
@@ -158,7 +177,7 @@ export class Transaction {
   async getDataHistoryTopUp(id) {
     try {
       const response = await http.get(
-        `/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}&start=${this.filterStart}&end=${this.filterEnd}`
+        `/transaction/history-deposit?page=${this.page}&pageSize=${this.pageSize}&user-destination=${id}&start=${this.filterStart}&end=${this.filterEnd}`
       );
       console.log(response, 'get data history')
       this.dataHistoryTopUp = response.body.data ?? [];