Merge branch 'develop' into 'devops-staging'

Tambah Role Customer Service

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

src/component/CommissionComponent.js

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

src/component/PartnerComponent.js

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

src/component/SupplierComponent.js

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

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 />}
@@ -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 />}
@@ -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,14 +1,14 @@
-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 {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {PartnerComponent} from "../../component/PartnerComponent";
-import {LINKS} from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
+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 { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { PartnerComponent } from "../../component/PartnerComponent";
+import { LINKS } from "../../routes/app";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Partner = observer(() => {
   const store = useStore();
@@ -40,22 +40,22 @@ export const Partner = observer(() => {
     },
     {
       route: LINKS.PARTNER,
-      name: <span style={{fontWeight: 'bold'}}>Rekanan</span>,
+      name: <span style={{ fontWeight: "bold" }}>Rekanan</span>,
     },
   ];
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
-        <Row style={{marginBottom: 20}}>
+        <Row style={{ marginBottom: 20 }}>
           {/* <Col span={12}>
             <Button>
                             <FilterOutlined/>
                             Filter
                         </Button>
           </Col> */}
-          <Col span={24} style={{textAlign: "right"}}>
+          <Col span={24} style={{ textAlign: "right" }}>
             {/* <Search
               placeholder="input search text"
               style={{
@@ -64,12 +64,16 @@ export const Partner = observer(() => {
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
             /> */}
-            <Button onClick={() => store.partner.visibleModalPartner = true}>
-              <PlusSquareOutlined/> New
+            {store.authentication.userData.role !== "Customer Service" && (
+              <Button
+                onClick={() => (store.partner.visibleModalPartner = true)}
+              >
+                <PlusSquareOutlined /> New
               </Button>
+            )}
           </Col>
         </Row>
-        <PartnerComponent/>
+        <PartnerComponent />
       </Card>
     </div>
   );

src/pages/Config/Supplier.js

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
   Button,
   Card,
@@ -21,7 +21,7 @@ import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
 import { SupplierComponent } from "../../component/SupplierComponent";
 import { LINKS } from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
+import { ModalLoaderContext } from "../../utils/modal";
 
 const { Search } = Input;
 
@@ -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/Membership.js

@@ -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 && (

src/pages/Product/Category.js

@@ -1,13 +1,12 @@
-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 {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {LINKS} from "../../routes/app";
-import {CategoryComponent} from "../../component/CategoryComponent";
-import {ModalLoaderContext} from "../../utils/modal";
-
+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 { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { LINKS } from "../../routes/app";
+import { CategoryComponent } from "../../component/CategoryComponent";
+import { ModalLoaderContext } from "../../utils/modal";
 
 export const Category = observer(() => {
   const store = useStore();
@@ -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/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;
@@ -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",
@@ -357,12 +393,124 @@ export const Profile = observer(() => {
         </Row>
         <Row>
           <Col span={24}>
-            <div>
-              <Title strong level={3}>
-                Riwayat Transaksi
-              </Title>
+            <Tabs defaultActiveKey="1">
+              <TabPane tab="History Top Up" key="1">
                 <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();
@@ -498,11 +648,12 @@ export const Profile = observer(() => {
                         );
                       }}
                     />
-              )}
                   </div>
+                )}
+              </TabPane>
+            </Tabs>
           </Col>
         </Row>
-        <div />
       </Card>
       <Modal
         visible={store.transaction.visibleModalFilterTransaction}

src/store/transaction.js

@@ -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}`
+      );
+      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);