From 7d3da6809534dfbaa5006eefed0248513654b5ee Mon Sep 17 00:00:00 2001
From: "ajat91.sudrajat" <ajat91.sudrajat@gmail.com>
Date: Fri, 31 Dec 2021 11:40:38 +0700
Subject: [PATCH] Perbaikan Menu

---
 src/pages/Home/Home.js             |  29 +--
 src/pages/Membership/DetailUser.js | 375 ++++++++++++++++++++++++-----
 src/pages/Membership/Membership.js |   7 +-
 src/store/transaction.js           |  20 +-
 4 files changed, 355 insertions(+), 76 deletions(-)

diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index 696969b..3c61c29 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -112,7 +112,8 @@ export const Home = observer(() => {
             }}
           >
             <Row>
-              <BarChartOutlined style={{ fontSize: 30 }} />
+              <BarChartOutlined style={{ fontSize: 25 ,marginRight:80}} />
+              
               <PageHeader title={<span>Total Transaksi</span>}>
                 <p>
                   <h4>{store.transaction.dataTransaction} Transaksi</h4>
@@ -132,8 +133,8 @@ export const Home = observer(() => {
             }}
           >
             <Row>
-              <DropboxOutlined style={{ fontSize: 30 }} />
-              <PageHeader title={<span>Total Keuntungan</span>}>
+              <DropboxOutlined style={{ fontSize: 25 }} />
+              <PageHeader title={<span>Total Keuntungan B2B</span>}>
                 <span>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
@@ -155,8 +156,8 @@ export const Home = observer(() => {
             }}
           >
             <Row>
-              <DollarCircleOutlined style={{ fontSize: 30 }} />
-              <PageHeader title={<span>Saldo</span>}>
+              <DollarCircleOutlined style={{ fontSize: 25 }} />
+              <PageHeader title={<span>Total Keuntungan B2C</span>}>
                 <span>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
@@ -173,7 +174,7 @@ export const Home = observer(() => {
           <Row style={{ marginLeft: 50, marginTop: 10 }}>
             <Card
               className={"shadow"}
-              title="Card title"
+              title="List Transaksi B2B"
               style={{
                 marginBottom: 30,
                 marginRight: 20,
@@ -207,7 +208,7 @@ export const Home = observer(() => {
             </Card>
             <Card
               className={"shadow"}
-              title="Card title"
+              title="List Transaksi B2C"
               style={{
                 marginBottom: 30,
                 borderColor: "salmon",
@@ -254,7 +255,7 @@ export const Home = observer(() => {
             }}
           >
             <Row>
-              <BarChartOutlined style={{ fontSize: 30 }} />
+              <BarChartOutlined style={{ fontSize: 25,marginRight:80 }} />
               <PageHeader title={<span>Total Transaksi</span>}>
                 <p>
                   <h4>{store.transaction.dataTransaction} Transaksi</h4>
@@ -274,8 +275,8 @@ export const Home = observer(() => {
             }}
           >
             <Row>
-              <DropboxOutlined style={{ fontSize: 30 }} />
-              <PageHeader title={<span>Total Keuntungan</span>}>
+              <DropboxOutlined style={{ fontSize: 25 }} />
+              <PageHeader title={<span>Total Keuntungan B2B</span>}>
                 <span>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
@@ -297,8 +298,8 @@ export const Home = observer(() => {
             }}
           >
             <Row>
-              <DollarCircleOutlined style={{ fontSize: 30 }} />
-              <PageHeader title={<span>Saldo</span>}>
+              <DollarCircleOutlined style={{ fontSize: 25 }} />
+              <PageHeader title={<span>Total Keuntungan B2C</span>}>
                 <span>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
@@ -315,7 +316,7 @@ export const Home = observer(() => {
           <Row style={{ marginLeft: 20, marginRight: 20, marginTop: 10 }}>
             <Card
               className={"shadow"}
-              title="Card title"
+              title="List Transaksi B2B"
               style={{
                 marginBottom: 10,
                 borderColor: "salmon",
@@ -347,7 +348,7 @@ export const Home = observer(() => {
             </Card>
             <Card
               className={"shadow"}
-              title="Card title"
+              title="List Transaksi B2C"
               style={{
                 marginBottom: 30,
                 borderColor: "salmon",
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index e3567f5..82e2aee 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -1,20 +1,32 @@
-import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, message, Row, Space, Table, Typography,} from "antd";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {format, parseISO} from "date-fns";
-import {ModalLoaderContext} from "../../utils/modal";
-import {useParams} from "react-router-dom";
-import {MembershipModal} from "./MembershipModal";
-
-const {Title, Text} = Typography;
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  message,
+  Row,
+  Space,
+  Table,
+  Typography,
+  Tabs,
+  List,
+  Divider
+} from "antd";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { format, parseISO } from "date-fns";
+import { ModalLoaderContext } from "../../utils/modal";
+import { useParams } from "react-router-dom";
+import { MembershipModal } from "./MembershipModal";
 
+const { Title, Text } = Typography;
+const { TabPane } = Tabs;
 export const DetailUser = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
-  const {id} = useParams();
+  const { id } = useParams();
   const [visibleModal, setVisibleModal] = useState(false);
   const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
   const [destination, setDestination] = useState(null);
@@ -24,6 +36,8 @@ export const DetailUser = observer(() => {
   useEffect(() => {
     (async () => {
       modalLoader.setLoading(true);
+      store.transaction.getDataHistoryTransaction();
+      store.transaction.getDetailHistoryTransaction();
       await getData();
       modalLoader.setLoading(false);
     })();
@@ -31,6 +45,7 @@ export const DetailUser = observer(() => {
     return () => {
       store.membership.dataDetail = {};
       store.transaction.dataHistoryTopUp = [];
+      store.transaction.dataDetailHistoryTransaction = [];
     };
   }, []);
 
@@ -38,8 +53,9 @@ export const DetailUser = observer(() => {
     const isAdmin = store.authentication.userData.role === "Admin";
     await Promise.allSettled([
       store.transaction.getDataHistoryTopUp(id),
+      store.transaction.getDetailHistoryTransaction(id),
       store.membership.getDetail(id),
-      store.role.getData(isAdmin)
+      store.role.getData(isAdmin),
     ]);
   };
 
@@ -77,22 +93,24 @@ export const DetailUser = observer(() => {
 
       if (response?.body?.statusCode === 200) {
         message.success(
-            initialData.isChangePassword
-                ? "Success Change Member Password"
-                : "Success Update Data Member");
+          initialData.isChangePassword
+            ? "Success Change Member Password"
+            : "Success Update Data Member"
+        );
       } else {
         message.error(
-            initialData.isChangePassword
-                ? "Failed Change Member Password"
-                : "Failed Update Data Member");
+          initialData.isChangePassword
+            ? "Failed Change Member Password"
+            : "Failed Update Data Member"
+        );
       }
       await getData();
     } catch (e) {
       modalLoader.setLoading(false);
       message.error(
-          initialData.isChangePassword
-              ? "Failed Update Member Password"
-              : "Failed Update Data Member"
+        initialData.isChangePassword
+          ? "Failed Update Member Password"
+          : "Failed Update Data Member"
       );
     }
     modalLoader.setLoading(false);
@@ -105,10 +123,10 @@ export const DetailUser = observer(() => {
       dataIndex: "amount",
       key: "amount",
       render: (text) =>
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text),
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
       title: "Transaction Date",
@@ -124,6 +142,57 @@ export const DetailUser = observer(() => {
     },
   ];
 
+  const column = [
+    {
+      title: "Price",
+      dataIndex: "price",
+      key: "price",
+
+      render: (text) =>
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
+    },
+    {
+      title: "Pembeli",
+      dataIndex: "buyer",
+      key: "buyer",
+    },
+    {
+      title: "Tujuan",
+      dataIndex: "transaction_destination",
+      key: "transaction_destination",
+    },
+    {
+      title: "Kode Transaksi",
+      dataIndex: "transaction_code",
+      key: "transaction_code",
+    },
+    {
+      title: "Status",
+      dataIndex: "status",
+      key: "status",
+    },
+    {
+      title: "No Seri",
+      dataIndex: "seri_number",
+      key: "seri_number",
+    },
+    {
+      title: "IDTrx Mitra",
+      dataIndex: "partner_transaction_code",
+      key: "partner_transaction_code",
+    },
+    {
+      title: "Transaction Date",
+      dataIndex: "created_at",
+      key: "created_at",
+      render: (text, record) => {
+        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
+      },
+    },
+  ];
   const routeData = [
     {
       route: LINKS.HOME,
@@ -135,7 +204,7 @@ export const DetailUser = observer(() => {
     },
     {
       route: LINKS.USER_DETAIL.replace(":id", id),
-      name: <span style={{fontWeight: "bold"}}>Detail User</span>,
+      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
     },
   ];
 
@@ -179,71 +248,263 @@ export const DetailUser = observer(() => {
               <Col span={12}>
                 <Text>
                   {store.membership.dataDetail.isActive === true
-                      ? "Aktif"
-                      : "Inaktif"}
+                    ? "Aktif"
+                    : "Inaktif"}
                 </Text>
               </Col>
             </Row>
           </Col>
           <Col lg={12} xs={24}>
-            {store.authentication.userData.role === "Admin" && <Title strong level={3}>Action User Detail</Title>}
-            {store.authentication.userData.role === "Admin" && <Space
+            {store.authentication.userData.role === "Admin" && (
+              <Title strong level={3}>
+                Action User Detail
+              </Title>
+            )}
+            {store.authentication.userData.role === "Admin" && (
+              <Space
                 size="middle"
                 align={"center"}
                 wrap={true}
-                style={{textAlign: 'center'}}
-            >
-              <Button
-                  type={store.membership.dataDetail.isActive === true ? "danger" : "primary"}
-                  onClick={() => changeStatus(store.membership.dataDetail.id, store.membership.dataDetail.isActive)}
+                style={{ textAlign: "center" }}
               >
-                {store.membership.dataDetail.isActive === true ? "Inactive" : "Active"}
-              </Button>
-              <Button
+                <Button
+                  type={
+                    store.membership.dataDetail.isActive === true
+                      ? "danger"
+                      : "primary"
+                  }
+                  onClick={() =>
+                    changeStatus(
+                      store.membership.dataDetail.id,
+                      store.membership.dataDetail.isActive
+                    )
+                  }
+                >
+                  {store.membership.dataDetail.isActive === true
+                    ? "Inactive"
+                    : "Active"}
+                </Button>
+                <Button
                   onClick={() => {
                     setInitialData({
                       id: store.membership.dataDetail.id,
                       name: store.membership.dataDetail.userDetail.name,
                       username: store.membership.dataDetail.username,
-                      phone_number: store.membership.dataDetail.userDetail.phone_number,
+                      phone_number:
+                        store.membership.dataDetail.userDetail.phone_number,
                       roleId: store.membership.dataDetail.roles.id,
                       isChangePassword: false,
                     });
                     setVisibleModal(true);
                   }}
-              >
-                Edit
-              </Button>
-              <Button
+                >
+                  Edit
+                </Button>
+                <Button
                   onClick={() => {
                     setInitialData({
                       id: store.membership.dataDetail.id,
                       name: store.membership.dataDetail.userDetail.name,
                       username: store.membership.dataDetail.username,
-                      phone_number: store.membership.dataDetail.userDetail.phone_number,
+                      phone_number:
+                        store.membership.dataDetail.userDetail.phone_number,
                       roleId: store.membership.dataDetail.roles.id,
                       isChangePassword: true,
                     });
                     setVisibleModal(true);
                   }}
-              >
-                Ganti Password
-              </Button>
-            </Space>}
+                >
+                  Ganti Password
+                </Button>
+                <Button
+                  type={
+                    store.membership.dataDetail.isActive === true
+                      ? "danger"
+                      : "primary"
+                  }
+                  onClick={() =>
+                    changeStatus(
+                      store.membership.dataDetail.id,
+                      store.membership.dataDetail.isActive
+                    )
+                  }
+                >
+                  Withdraw Profit
+                </Button>
+              </Space>
+            )}
           </Col>
         </Row>
         <Row>
           <Col span={24}>
-            <div>
-              <Title strong level={3}>
-                History Top Up
-              </Title>
-              <Table
+            <Tabs defaultActiveKey="1">
+              <TabPane tab="History Top Up" key="1">
+                {/* {store.ui.mediaQuery.isDesktop && ( */}
+                <Table
+                  key="1"
+                  hasEmpty
                   columns={columns}
                   dataSource={store.transaction.dataHistoryTopUp}
                   bordered
-              />
-            </div>
+                  pagination={{
+                    pageSize: store.transaction.pageSize,
+                    total: store.transaction.total_data,
+                    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 getData();
+                    modalLoader.setLoading(false);
+                  }}
+                />
+                {/* )} */}
+                {/* <Table
+                  columns={columns}
+                  dataSource={store.transaction.dataHistoryTopUp}
+                  bordered
+                /> */}
+              </TabPane>
+              <TabPane tab="History Transaction" key="2">
+                {store.ui.mediaQuery.isDesktop && (
+                  <Table
+                    key="1"
+                    hasEmpty
+                    columns={column}
+                    dataSource={store.transaction.dataDetailHistoryTransaction}
+                    bordered
+                    pagination={{
+                      pageSize: store.transaction.pageSize,
+                      total: store.transaction.total_data,
+                      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 getData();
+                      modalLoader.setLoading(false);
+                    }}
+                  />
+                )}
+
+                {store.ui.mediaQuery.isMobile && (
+                  <List
+                    itemLayout="horizontal"
+                    position={"top"}
+                    pagination={{
+                      onChange: async (page) => {
+                        store.transaction.pageSize = page.pageSize;
+                        store.transaction.page = page.current - 1;
+                        modalLoader.setLoading(true);
+                        await getData();
+                        modalLoader.setLoading(false);
+                      },
+                      pageSize: store.transaction.pageSize,
+                      total: store.transaction.totalData,
+                      current: store.transaction.page + 1,
+                      style: { marginBottom: "1rem", marginRight: "1rem" },
+                    }}
+                    dataSource={store.membership.data}
+                    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.name}
+                              description={
+                                <div style={{}}>
+                                  <p>
+                                    <small>Saldo System : {item.name}</small>{" "}
+                                    <br />
+                                    <small>Role : {item.roleName}</small> <br />
+                                    <small>
+                                      Saldo Supplier : {item.coa?.amount}
+                                    </small>{" "}
+                                    <br />
+                                    {/* <Button
+                                      style={{ marginRight: 10 }}
+                                      onClick={() => {
+                                        setDestination(item?.id);
+                                        console.log(item?.id);
+                                        setIsVisibleTopUpModal(true);
+                                      }}
+                                    >
+                                      <DownloadOutlined /> Top Up Saldo
+                                    </Button>
+                                    <Button
+                                      onClick={async () => {
+                                        await store.transaction.getDataHistoryTopUp(
+                                          item.id
+                                        );
+                                        history.push(
+                                          LINKS.USER_DETAIL.replace(
+                                            ":id",
+                                            item.id
+                                          )
+                                        );
+                                        console.log(item.id);
+                                      }}
+                                    >
+                                      Detail
+                                    </Button> */}
+                                  </p>
+                                </div>
+                              }
+                            />
+                            <div style={{ marginRight: 16 }}>
+                              <p
+                                style={{
+                                  fontSize: 9,
+                                  margin: 0,
+                                }}
+                              >
+                                {/* <Button
+                            type={
+                              item?.isActive === true ? "danger" : "primary"
+                            }
+                            onClick={() =>
+                              changeStatus(item?.id, item?.isActive)
+                            }
+                          >
+                            {item?.isActive === true ? "Inactive" : "Active"}
+                          </Button> */}
+                              </p>
+                            </div>
+                          </List.Item>
+                          <Divider plain style={{ margin: 0 }} />
+                        </div>
+                      );
+                    }}
+                  />
+                )}
+                {/* <Table
+                  columns={column}
+                  dataSource={store.transaction.dataDetailHistoryTransaction}
+                  bordered
+                /> */}
+              </TabPane>
+            </Tabs>
           </Col>
         </Row>
         <div />
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 2fa7696..48da62c 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -111,6 +111,8 @@ export const Membership = observer(() => {
     modalLoader.setLoading(true);
     await store.membership.getData();
     modalLoader.setLoading(false);
+    setFilterMembership([]);
+    setFilterPartner([]);
     store.membership.visibleModalFilterMembership = false;
   };
 
@@ -218,6 +220,8 @@ export const Membership = observer(() => {
           <Button
             onClick={async () => {
               await store.transaction.getDataHistoryTopUp(record.id);
+              await store.transaction.getDetailHistoryTransaction(record.id)
+              //await store.transaction.getDataHistoryTransaction()
               history.push(LINKS.USER_DETAIL.replace(":id", record.id));
               console.log(record.id);
             }}
@@ -507,7 +511,8 @@ export const Membership = observer(() => {
         title={"Filter"}
         footer={footerLayoutFilter}
         onCancel={() => {
-          form.resetFields();
+          setFilterMembership([]);
+          setFilterPartner([]);
           store.membership.visibleModalFilterMembership = false;
         }}
       >
diff --git a/src/store/transaction.js b/src/store/transaction.js
index 32be61d..8ae9455 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -30,7 +30,9 @@ export class Transaction {
   pageSizeHistoryTopUp = 10;
   dataHistoryTopUp = [];
   total_dataHistoryTopUp = 0;
-  dataTransaction=[]
+  dataTransaction = [];
+  dataDetailHistoryTransaction = [];
+  total_dataDetailHistoryTransaction=0;
 
   //filter
   visibleModalFilterTransaction = false;
@@ -55,9 +57,7 @@ export class Transaction {
 
   async getDataTransaction() {
     try {
-      const response = await http.get(
-        `/transaction/total-order`
-      );
+      const response = await http.get(`/transaction/total-order`);
       //console.log(response)
       this.dataTransaction = response.body.data ?? [];
       this.total_data = response?.body?.count ?? 0;
@@ -106,11 +106,23 @@ export class Transaction {
     }
   }
 
+  async getDetailHistoryTransaction(id) {
+    try {
+      const response = await http.get(`/transaction/history-user/${id}`);
+      console.log(response,'Data Trans');
+      this.dataDetailHistoryTransaction = response.body.data ?? [];
+      this.total_dataDetailHistoryTransaction = response?.body?.count ?? 0;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   async getDataHistoryTopUp(id) {
     try {
       const response = await http.get(
         `/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`
       );
+      console.log(response,'get data history')
       this.dataHistoryTopUp = response.body.data ?? [];
       this.total_dataHistoryTopUp = response?.body?.count ?? 0;
     } catch (e) {