From f6cc7ee35911e8bebcd3466ae9696e413f35d5c8 Mon Sep 17 00:00:00 2001
From: "ajat91.sudrajat" <ajat91.sudrajat@gmail.com>
Date: Tue, 25 Jan 2022 09:35:21 +0700
Subject: [PATCH 1/3] Bug Fixing PPOB

---
 src/pages/Membership/DetailUser.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 894960b..3ba837f 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -460,8 +460,8 @@ export const DetailUser = observer(() => {
               <Col span={12}>
                 <Text>
                   {store.authentication.dataProfit.is_active === true
-                    ? "Aktif"
-                    : "Inaktif"}
+                    ? "Active"
+                    : "Inactive"}
                 </Text>
               </Col>
               {/* {store.authentication.userData.role === "Sales" && (

From 198063a7d9ff06148b1d5d3322e9eedcb1467933 Mon Sep 17 00:00:00 2001
From: "ajat91.sudrajat" <ajat91.sudrajat@gmail.com>
Date: Tue, 25 Jan 2022 09:59:57 +0700
Subject: [PATCH 2/3] Bug Fixing

---
 src/component/ProductComponent.js       |  14 ---
 src/pages/Membership/DetailUser.js      |  76 ------------
 src/pages/Membership/FilterUser.js      | 141 +++++++++++-----------
 src/pages/Membership/Konfirmasi.js      | 111 ++----------------
 src/pages/Membership/Membership.js      |   1 -
 src/pages/Membership/MembershipModal.js |  32 ++---
 src/pages/Payback/Payback.js            |  15 +--
 src/pages/Payback/PaybackCreated.js     |  13 ---
 src/pages/Product/Category.js           |  14 ---
 src/pages/Product/Subcategory.js        |  46 +++-----
 src/pages/Profile/Profile.js            |  21 ----
 src/store/supplier.js                   | 149 ++++++++++++------------
 12 files changed, 177 insertions(+), 456 deletions(-)

diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 34e0041..854f78d 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -220,8 +220,6 @@ export const ProductComponent = observer((props) => {
   const handleCancelFilter = async () => {
     store.product.filterSubCategory = null;
     store.product.filterSupplier = null;
-    // setFilterSubCategories([]);
-    // setFilterSupplier([]);
     store.product.visibleModalFilterProduct = false;
     await store.product.getData();
   };
@@ -232,21 +230,9 @@ export const ProductComponent = observer((props) => {
     modalLoader.setLoading(true);
     await store.product.getData();
     modalLoader.setLoading(false);
-    // setFilterSupplier([]);
-    // setFilterSubCategories([]);
     store.product.visibleModalFilterProduct = false;
   };
 
-  // const handleFilterCategory = async (value) => {
-  //   if (value) {
-  //     store.product.filterCategory = value;
-  //     await store.product.getDataSubCategories();
-  //   } else {
-  //     store.product.filterCategory = null;
-  //     await store.product.getDataSubCategories();
-  //   }
-  // };
-
   const footerLayoutFilter = [
     <Button
       key={"remove"}
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 3ba837f..02a3d13 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -292,10 +292,6 @@ export const DetailUser = observer(() => {
         justifyContent: "center",
       }
     : null;
-  // console.log(
-  //   JSON.parse(store.authentication.dataProfit.userDetail?.image_store),
-  //   " ini dia"
-  // );
   const data = store.authentication.listImage;
   console.log(data, "ini data");
   console.log(
@@ -464,44 +460,6 @@ export const DetailUser = observer(() => {
                     : "Inactive"}
                 </Text>
               </Col>
-              {/* {store.authentication.userData.role === "Sales" && (
-                <Row>
-                  <Col span={12}>
-                    <Text strong>Foto Identitas</Text>
-                  </Col>
-                  <Col span={12}></Col>
-                  <Col span={12}>
-                    <Text>
-                      <Image
-                        src={
-                          store.authentication.dataProfit.userDetail
-                            ?.image_identity
-                            ? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
-                            : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                        }
-                        style={{ width: "10vw",marginLeft:10 }}
-                      />
-                    </Text>
-                  </Col>
-                  <Col span={24}>
-                    <Text strong>Foto Toko</Text>
-                    <Text>
-                    <Row>
-                        {store.authentication.listImage.map((item) => (
-                          <Image
-                            src={
-                              item
-                                ? `${appConfig.apiUrl}/config/image/${item}`
-                                : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                            }
-                            style={{ width: "10vw",marginRight:15 }}
-                          />
-                        ))}
-                      </Row>
-                    </Text>
-                  </Col>
-                </Row>
-              )} */}
               {store.authentication.userData.role === "Admin" &&
                 store.authentication.dataProfit.roles?.name !==
                   "Admin Partner" && (
@@ -587,7 +545,6 @@ export const DetailUser = observer(() => {
                   </Col>
                 </Row>
               )}
-
               {store.authentication.userData.role === "Supervisor" && (
                 <Row>
                   <Col span={12}>
@@ -664,7 +621,6 @@ export const DetailUser = observer(() => {
           <Col span={24}>
             <Tabs defaultActiveKey="1">
               <TabPane tab="History Top Up" key="1">
-                {/* {store.ui.mediaQuery.isDesktop && ( */}
                 <Table
                   key="1"
                   hasEmpty
@@ -687,36 +643,9 @@ export const DetailUser = observer(() => {
                     modalLoader.setLoading(false);
                   }}
                 />
-                {/* )} */}
-                {/* <Table
-                  columns={columns}
-                  dataSource={store.transaction.dataHistoryTopUp}
-                  bordered
-                /> */}
               </TabPane>
               <TabPane tab="History Transaction" key="2">
                 {store.ui.mediaQuery.isDesktop && (
-                  //   <Table
-                  //   columns={columns}
-                  //   bordered
-                  //   dataSource={store.transaction.dataHistoryTransaction}
-                  //   pagination={{
-                  //     pageSize: store.transaction.pageSizeHistoryTransaction,
-                  //     total: store.transaction.total_dataHistoryTransaction,
-                  //     current: store.transaction.pageHistoryTransaction + 1,
-                  //     showSizeChanger: true,
-                  //     simple: false,
-                  //   }}
-                  //   onChange={async (page) => {
-                  //     let pageNumber = page.current;
-                  //     store.transaction.pageSizeHistoryTransaction =
-                  //       page.pageSize;
-                  //     store.transaction.pageHistoryTransaction = pageNumber - 1;
-                  //     modalLoader.setLoading(true);
-                  //     await store.transaction.getDataHistoryTransaction();
-                  //     modalLoader.setLoading(false);
-                  //   }}
-                  // />
                   <Table
                     key="1"
                     hasEmpty
@@ -843,11 +772,6 @@ export const DetailUser = observer(() => {
                     }}
                   />
                 )}
-                {/* <Table
-                  columns={column}
-                  dataSource={store.transaction.dataDetailHistoryTransaction}
-                  bordered
-                /> */}
               </TabPane>
             </Tabs>
           </Col>
diff --git a/src/pages/Membership/FilterUser.js b/src/pages/Membership/FilterUser.js
index 814d3c6..5328009 100644
--- a/src/pages/Membership/FilterUser.js
+++ b/src/pages/Membership/FilterUser.js
@@ -1,82 +1,77 @@
 import React, { useState } from "react";
-import { Form, Input, Modal, Select, InputNumber,Row,Title,Col,Option } from "antd";
+import {
+  Form,
+  Input,
+  Modal,
+  Select,
+  InputNumber,
+  Row,
+  Title,
+  Col,
+  Option,
+} from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
 
-
 export const FilterUser = observer(() => {
-    const store = useStore();
-//   const [form] = Form.useForm();
-//   const { Option } = Select;
-//   const store = useStore();
-//   const [value, setValue] = useState();
-
+  const store = useStore();
   return (
     <Modal
-    visible={store.membership.visibleModalFilterMembership}
-    title={"Filter"}
-    //footer={footerLayoutFilter}
-  >
-    <Row>
-      <Col span={24}>
-        <Title level={5} type={"secondary"} strong>
-          Filter Supplier
-        </Title>
-        <Select
-          mode={"multiple"}
-          placeholder="Choose Supplier"
-        //   onChange={(val) => {
-        //     setFilterSupplier(val);
-        //   }}
-          style={{ marginBottom: "20px", width: "100%" }}
-        //   value={filterSupplier}
-        >
-          {store.supplier.data.map((item) => (
-            <Option value={item.id} key={item.id}>
-              {item.name}
-            </Option>
-          ))}
-        </Select>
-      </Col>
-      <Col span={24}>
-        <Title level={5} type={"secondary"} strong>
-          Filter Categories
-        </Title>
-        <Select
-          mode={"multiple"}
-          placeholder="Choose Category"
-        //   onChange={async (val) => handleFilterCategory(val)}
-          style={{ marginBottom: "20px", width: "100%" }}
-          value={store.product.filterCategory || []}
-        >
-          {store.category.data.map((item) => (
-            <Option value={item.id} key={item.id}>
-              {item.name}
-            </Option>
-          ))}
-        </Select>
-      </Col>
-      <Col span={24}>
-        <Title level={5} type={"secondary"} strong>
-          Filter Sub-Categories
-        </Title>
-        <Select
-          mode={"multiple"}
-          placeholder="Choose Sub-Category"
-        //   onChange={(val) => {
-        //     setFilterSubCategories(val);
-        //   }}
-          style={{ marginBottom: "20px", width: "100%" }}
-        //   value={filterSubCategories}
-        >
-          {store.product.dataSubCategories.map((item) => (
-            <Option value={item.id} key={item.id}>
-              {item.name}
-            </Option>
-          ))}
-        </Select>
-      </Col>
-    </Row>
-  </Modal>
+      visible={store.membership.visibleModalFilterMembership}
+      title={"Filter"}
+      //footer={footerLayoutFilter}
+    >
+      <Row>
+        <Col span={24}>
+          <Title level={5} type={"secondary"} strong>
+            Filter Supplier
+          </Title>
+          <Select
+            mode={"multiple"}
+            placeholder="Choose Supplier"
+            style={{ marginBottom: "20px", width: "100%" }}
+          >
+            {store.supplier.data.map((item) => (
+              <Option value={item.id} key={item.id}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        </Col>
+        <Col span={24}>
+          <Title level={5} type={"secondary"} strong>
+            Filter Categories
+          </Title>
+          <Select
+            mode={"multiple"}
+            placeholder="Choose Category"
+            style={{ marginBottom: "20px", width: "100%" }}
+            value={store.product.filterCategory || []}
+          >
+            {store.category.data.map((item) => (
+              <Option value={item.id} key={item.id}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        </Col>
+        <Col span={24}>
+          <Title level={5} type={"secondary"} strong>
+            Filter Sub-Categories
+          </Title>
+          <Select
+            mode={"multiple"}
+            placeholder="Choose Sub-Category"
+            style={{ marginBottom: "20px", width: "100%" }}
+          >
+            {store.product.dataSubCategories.map((item) => (
+              <Option value={item.id} key={item.id}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        </Col>
+      </Row>
+    </Modal>
   );
 });
diff --git a/src/pages/Membership/Konfirmasi.js b/src/pages/Membership/Konfirmasi.js
index d55bbab..d6c4f3f 100644
--- a/src/pages/Membership/Konfirmasi.js
+++ b/src/pages/Membership/Konfirmasi.js
@@ -93,24 +93,11 @@ export const Konfirmasi = observer(() => {
       dataIndex: "image_prove",
       key: "image_prove",
       render: (text, record) => (
-        // <Image
-        //   src={`${appConfig.apiUrl}/config/image/${text}`}
-        //   style={{ width: "5vw" }}
-        //   alt={record.id}
-        // />
         <Button
           onClick={async () => {
-            // await store.transaction.getDataHistoryTopUp(record.id);
-            // await store.transaction.getDetailHistoryTransaction(record.id);
-            // await store.authentication.getProfit(record.id);
-            //await store.transaction.getDataHistoryTransaction()
-            // history.push(LINKS.USER_DETAIL.replace(":id", record.id));
-            // console.log(record.id);
             setToko(record);
             setVisibleModalToko(true);
           }}
-        
-          // type="primary"
         >
           Lihat Foto
         </Button>
@@ -272,42 +259,6 @@ export const Konfirmasi = observer(() => {
     store.payback.visibleModalFilterPayback = false;
   };
 
-  const handleFilterCategory = async (value) => {
-    if (value) {
-      store.product.filterCategory = value;
-      await store.product.getDataSubCategories();
-    } else {
-      store.product.filterCategory = null;
-      await store.product.getDataSubCategories();
-    }
-  };
-
-  const footerLayoutFilter = [
-    <Button
-      key={"remove"}
-      onClick={handleRemoveFilter}
-      style={{
-        backgroundColor: "#e74e5e",
-        color: "#fff",
-      }}
-    >
-      Remove Filter
-    </Button>,
-    <Button key={"cancel"} onClick={handleCancelFilter}>
-      Cancel
-    </Button>,
-    <Button
-      key={"submit"}
-      onClick={handleSubmitFilter}
-      style={{
-        backgroundColor: "#4e79e7",
-        color: "#fff",
-      }}
-    >
-      Apply
-    </Button>,
-  ];
-
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
@@ -317,28 +268,6 @@ export const Konfirmasi = observer(() => {
       />
       <Card>
         <div style={{ marginTop: 30 }}>
-          {/* <Row style={{ marginBottom: 20 }}> */}
-          {/* <Col span={12}>
-              <Button
-                onClick={() => {
-                  store.payback.visibleModalFilterPayback = true;
-                }}
-              >
-                <FilterOutlined />
-                Filter
-              </Button>
-            </Col> */}
-          {/* <Col span={12} style={{ textAlign: "right" }}> */}
-          {/* <Search
-                placeholder="input search text"
-                style={{
-                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-                }}
-              /> */}
-          {/* </Col> */}
-          {/* </Row> */}
           {store.ui.mediaQuery.isDesktop && (
             <Table
               key="1"
@@ -400,7 +329,6 @@ export const Konfirmasi = observer(() => {
                     >
                       <List.Item.Meta
                         className={[""].join(" ")}
-                        // title={item.username}
                         description={
                           <div style={{}}>
                             <p>
@@ -418,7 +346,6 @@ export const Konfirmasi = observer(() => {
                                         okType: "primary",
                                         onOk() {
                                           handleApprove(item.id);
-                                          //console.log(record.id);
                                         },
                                         onCancel() {
                                           console.log("Cancel");
@@ -473,20 +400,14 @@ export const Konfirmasi = observer(() => {
                                 </Tag>
                               )}
                               <Button
-                               style={
-                                item.is_active === true
-                                  ? {
-                                      marginTop: 5,
-                                    }
-                                  : { marginLeft: 10, marginTop: 5 }
-                              }
+                                style={
+                                  item.is_active === true
+                                    ? {
+                                        marginTop: 5,
+                                      }
+                                    : { marginLeft: 10, marginTop: 5 }
+                                }
                                 onClick={async () => {
-                                  // await store.transaction.getDataHistoryTopUp(record.id);
-                                  // await store.transaction.getDetailHistoryTransaction(record.id);
-                                  // await store.authentication.getProfit(record.id);
-                                  //await store.transaction.getDataHistoryTransaction()
-                                  // history.push(LINKS.USER_DETAIL.replace(":id", record.id));
-                                  // console.log(record.id);
                                   setIdentitas(item);
                                   setVisibleModalIdentitas(true);
                                 }}
@@ -497,9 +418,9 @@ export const Konfirmasi = observer(() => {
                                 style={
                                   item.is_active === true
                                     ? {
-                                        marginLeft:10,
+                                        marginLeft: 10,
                                       }
-                                    : {marginTop: 10 }
+                                    : { marginTop: 10 }
                                 }
                                 onClick={async () => {
                                   setToko(item);
@@ -512,19 +433,7 @@ export const Konfirmasi = observer(() => {
                           </div>
                         }
                       />
-                      <div style={{ marginRight: 16 }}>
-                        {/* <p
-                          style={{
-                            fontSize: 9,
-                            margin: 0,
-                          }}
-                        >
-                          <Image
-                            src={`${appConfig.apiUrl}/config/image/${item.image_prove}`}
-                            style={{ width: "10vw" }}
-                          />
-                        </p> */}
-                      </div>
+                      <div style={{ marginRight: 16 }}></div>
                     </List.Item>
                     <Divider plain style={{ margin: 0 }} />
                   </div>
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index ab72a73..522fd45 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -230,7 +230,6 @@ export const Membership = observer(() => {
               await store.transaction.getDataHistoryTopUp(record.id);
               await store.transaction.getDetailHistoryTransaction(record.id);
               await store.authentication.getProfit(record.id);
-              //await store.transaction.getDataHistoryTransaction()
               history.push(LINKS.USER_DETAIL.replace(":id", record.id));
               console.log(record.id);
             }}
diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index e309648..d1bca04 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -114,36 +114,25 @@ export const MembershipModal = ({
   };
 
   const uploadHandler = async (args) => {
-    // if (fileList === "") {
     const file = args.file;
     const res = await store.payback.uploadImages(file);
     console.log(res, "ini respon 1");
     setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
-    //setResponseFilename(res.body.filename);
-    console.log(initialData.image_identity)
+    console.log(initialData.image_identity);
     initialData.image_identity !== ""
       ? file === ""
         ? setResponseFilename(initialData.image_identity)
         : setResponseFilename(res.body.filename)
       : setResponseFilename(res.body.filename);
     setFileList([
-          {
-            uid: "-1",
-            name: res.body.filename,
-            status: "done",
-            url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
-          },
-        ]);
+      {
+        uid: "-1",
+        name: res.body.filename,
+        status: "done",
+        url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
+      },
+    ]);
     setLoading(false);
-    // } else {
-    //   const file = args.file;
-    //   const res = await store.payback.uploadImages(file);
-    //   console.log(res, "ini respon 1");
-    //   setImage(`${appConfig.apiUrl}/config/image/${initialData.image_identity}`);
-    //   setResponseFilename(initialData.image_identity);
-    //   setFileList([initialData.image_identity]);
-    //   setLoading(false);
-    // }
   };
 
   const uploadHandlerStore = async (args) => {
@@ -335,9 +324,6 @@ export const MembershipModal = ({
                   <Upload
                     listType="picture-card"
                     fileList={fileList}
-                    // onPreview={(file) => {
-                    //   setPreviewImage(file.url || file.filename);
-                    // }}
                     showUploadList={true}
                     onPreview={handlePreviewData}
                     onChange={handleChange}
@@ -496,8 +482,6 @@ export const MembershipModal = ({
                   }}
                 />
               </Form.Item>
-              {/* <Row>
-                <Col> */}
               <Form.Item label="Upload Identity Image" name="image_identity">
                 <div>
                   <Upload
diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index 618566d..7b59a33 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -35,8 +35,7 @@ import { capitalize } from "lodash";
 import { PAYBACK_STATUS } from "../../constants/payback";
 import moment from "moment";
 
-const { Search } = Input;
-const { RangePicker } = DatePicker;
+
 export const Payback = observer(() => {
   const { Option } = Select;
   const { Title } = Typography;
@@ -245,17 +244,7 @@ export const Payback = observer(() => {
     modalLoader.setLoading(false);
     store.payback.visibleModalFilterPayback = false;
   };
-
-  const handleFilterCategory = async (value) => {
-    if (value) {
-      store.product.filterCategory = value;
-      await store.product.getDataSubCategories();
-    } else {
-      store.product.filterCategory = null;
-      await store.product.getDataSubCategories();
-    }
-  };
-
+  
   const footerLayoutFilter = [
     <Button
       key={"remove"}
diff --git a/src/pages/Payback/PaybackCreated.js b/src/pages/Payback/PaybackCreated.js
index e55ba2e..4a126eb 100644
--- a/src/pages/Payback/PaybackCreated.js
+++ b/src/pages/Payback/PaybackCreated.js
@@ -28,11 +28,8 @@ import { appConfig } from "../../config/app";
 import { PAYBACK_STATUS } from "../../constants/payback";
 import moment from "moment";
 
-const { Search } = Input;
 
 export const PaybackCreated = observer(() => {
-  const { Option } = Select;
-  const { Title } = Typography;
   const [form] = Form.useForm();
   const store = useStore();
   const [filterMembership, setFilterMembership] = useState([]);
@@ -167,16 +164,6 @@ export const PaybackCreated = observer(() => {
     store.payback.visibleModalFilterCreate = false;
   };
 
-  // const handleFilterCategory = async (value) => {
-  //   if (value) {
-  //     store.product.filterCategory = value;
-  //     await store.product.getDataSubCategories();
-  //   } else {
-  //     store.product.filterCategory = null;
-  //     await store.product.getDataSubCategories();
-  //   }
-  // };
-
   const footerLayoutFilter = [
     <Button
       key={"remove"}
diff --git a/src/pages/Product/Category.js b/src/pages/Product/Category.js
index ca64fd7..1cbedc8 100644
--- a/src/pages/Product/Category.js
+++ b/src/pages/Product/Category.js
@@ -50,21 +50,7 @@ export const Category = observer(() => {
       <BreadcumbComponent data={routeData} />
       <Card>
         <Row style={{ marginBottom: 20 }}>
-          {/* <Col span={12}>
-            <Button>
-              <FilterOutlined />
-              Filter
-            </Button>
-          </Col> */}
           <Col span={24} style={{ textAlign: "right" }}>
-            {/* <Search
-              placeholder="input search text"
-              style={{
-                width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-              }}
-            /> */}
             <Button
               onClick={() => (store.category.visibleModalCategory = true)}
             >
diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js
index 0594a68..b17dcb1 100644
--- a/src/pages/Product/Subcategory.js
+++ b/src/pages/Product/Subcategory.js
@@ -1,14 +1,14 @@
-import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Input, message, Row} from "antd";
-import {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 {SubcategoryComponent} from "../../component/SubcategoryComponent";
-import {ModalLoaderContext} from "../../utils/modal";
+import React, { useContext, useEffect } from "react";
+import { Button, Card, Col, Input, message, Row } from "antd";
+import { 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 { SubcategoryComponent } from "../../component/SubcategoryComponent";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Subcategory = observer(() => {
   const store = useStore();
@@ -45,38 +45,24 @@ export const Subcategory = observer(() => {
     },
     {
       route: LINKS.SUBCATEGORY,
-      name: <span style={{fontWeight: "bold"}}>Sub Kategori</span>,
+      name: <span style={{ fontWeight: "bold" }}>Sub Kategori</span>,
     },
   ];
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
-        <Row style={{marginBottom: 20}}>
-          {/* <Col span={12}>
-            <Button>
-              <FilterOutlined />
-              Filter
-            </Button>
-          </Col> */}
-          <Col span={24} style={{textAlign: "right"}}>
-            {/* <Search
-              placeholder="input search text"
-              style={{
-                width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-              }}
-            /> */}
+        <Row style={{ marginBottom: 20 }}>
+          <Col span={24} style={{ textAlign: "right" }}>
             <Button
               onClick={() => (store.subcategory.visibleModalSubcategory = true)}
             >
-              <PlusSquareOutlined/> New
+              <PlusSquareOutlined /> New
             </Button>
           </Col>
         </Row>
-        <SubcategoryComponent/>
+        <SubcategoryComponent />
       </Card>
     </div>
   );
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 846f497..11b10aa 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -306,27 +306,6 @@ export const Profile = observer(() => {
                   </Col>
                 </Row>
               )}
-              {/* {store.authentication.userData.role === "Supervisor" && (
-                <Row>
-                  <Col span={12}>
-                    <Text strong>Foto Identitas</Text>
-                  </Col>
-                  <Col span={12}></Col>
-                  <Col span={12}>
-                    <Text>
-                      <Image
-                        src={
-                          store.authentication.dataProfit.profileData
-                            ?.image_identity
-                            ? `${appConfig.apiUrl}/config/image/${store.authentication.profileData.userDetail?.image_identity}`
-                            : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
-                        }
-                        style={{ width: "10vw" }}
-                      />
-                    </Text>
-                  </Col>
-                </Row>
-              )} */}
             </Row>
           </Col>
           <Col span={store.ui.mediaQuery.isMobile ? 24 : 5}>
diff --git a/src/store/supplier.js b/src/store/supplier.js
index ecc81e1..c3e0f74 100644
--- a/src/store/supplier.js
+++ b/src/store/supplier.js
@@ -1,90 +1,87 @@
-import {makeAutoObservable} from "mobx";
-import {http} from "../utils/http";
+import { makeAutoObservable } from "mobx";
+import { http } from "../utils/http";
 
 export class Supplier {
-    page = 0;
-    pageSize = 10
-    data = [];
-    total_data = 0;
-    filterCategory = null;
-    visibleModalSupplier = false;
-    visibleModalTransaction = false;
-    code = "";
+  page = 0;
+  pageSize = 10;
+  data = [];
+  total_data = 0;
+  filterCategory = null;
+  visibleModalSupplier = false;
+  visibleModalTransaction = false;
+  code = "";
 
-    pageCategories = 0;
-    pageSizeCategories = 10
-    dataCategories = [];
-    total_dataCategories = 0;
+  pageCategories = 0;
+  pageSizeCategories = 10;
+  dataCategories = [];
+  total_dataCategories = 0;
 
-    pageSubCategories = 0;
-    pageSizeSubCategories = 10
-    dataSubCategories = [];
-    total_dataSubCategories = 0;
+  pageSubCategories = 0;
+  pageSizeSubCategories = 10;
+  dataSubCategories = [];
+  total_dataSubCategories = 0;
 
-    constructor(ctx) {
-        this.ctx = ctx;
-        makeAutoObservable(this);
-    }
+  constructor(ctx) {
+    this.ctx = ctx;
+    makeAutoObservable(this);
+  }
 
-    async getData() {
-        try {
-            const response = await http.get(`/users/supplier?page=${this.page}&pageSize=${this.pageSize}`);
-            //console.log(response)
-            this.data = response.body.data ?? []
-            this.total_data = response.body.count ?? 0
-        } catch (e) {
-            console.error(e);
-        }
-    }
-    
-    async create(data) {
-        // try {
-            const response = await http.post('/users/supplier').send(data);
-           //await this.getData();
-            return response;
-        // } catch (e) {
-        //     console.error(e);
-        // }
-    }
-    async createTransaction(data) {
-        try {
-            const response = await http.post('/transaction/add-saldo-supplier').send(data);
-            await this.getData();
-            return response;
-        } catch (e) {
-            console.error(e);
-        }
+  async getData() {
+    try {
+      const response = await http.get(
+        `/users/supplier?page=${this.page}&pageSize=${this.pageSize}`
+      );
+      //console.log(response)
+      this.data = response.body.data ?? [];
+      this.total_data = response.body.count ?? 0;
+    } catch (e) {
+      console.error(e);
     }
+  }
 
-    async update(id, data) {
-        try {
-            const response = await http.put(`/users/supplier/${id}`).send(data);
-            await this.getData();
-            return response;
-        } catch (e) {
-            console.error(e);
-        }
+  async create(data) {
+    const response = await http.post("/users/supplier").send(data);
+    return response;
+  }
+  async createTransaction(data) {
+    try {
+      const response = await http
+        .post("/transaction/add-saldo-supplier")
+        .send(data);
+      await this.getData();
+      return response;
+    } catch (e) {
+      console.error(e);
     }
+  }
 
-    async delete(id) {
-        try {
-            const response = await http.del(`/product/${id}`);
-            await this.getData();
-            return response;
-        } catch (e) {
-            console.error(e)
-        }
+  async update(id, data) {
+    try {
+      const response = await http.put(`/users/supplier/${id}`).send(data);
+      await this.getData();
+      return response;
+    } catch (e) {
+      console.error(e);
     }
+  }
 
-    async changeStatus(id, status) {
-        try {
-            const response = await http.get(`/users/supplier/${id}/${status}`);
-            await this.getData();
-            return response;
-        } catch (e) {
-            console.error(e);
-        }
+  async delete(id) {
+    try {
+      const response = await http.del(`/product/${id}`);
+      await this.getData();
+      return response;
+    } catch (e) {
+      console.error(e);
     }
+  }
+
+  async changeStatus(id, status) {
+    try {
+      const response = await http.get(`/users/supplier/${id}/${status}`);
+      await this.getData();
+      return response;
+    } catch (e) {
+      console.error(e);
+    }
+  }
 }
-
-

From d287798e5f9ea68a6560f10742dbb528f5c10634 Mon Sep 17 00:00:00 2001
From: "ajat91.sudrajat" <ajat91.sudrajat@gmail.com>
Date: Wed, 26 Jan 2022 11:41:38 +0700
Subject: [PATCH 3/3] Tambah Fitur

---
 src/pages/Membership/DetailUser.js | 191 ++++++++++++++++++++++++-----
 src/pages/Membership/Membership.js |   6 +
 src/pages/Profile/Profile.js       |  14 ++-
 src/store/transaction.js           |   2 +-
 4 files changed, 181 insertions(+), 32 deletions(-)

diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 02a3d13..3d5f1cb 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -13,9 +13,11 @@ import {
   Tag,
   Divider,
   Image,
-  Avatar,
+  Modal,
+  Form,
+  DatePicker,
 } from "antd";
-import { UserOutlined } from "@ant-design/icons";
+import { UserOutlined, FilterOutlined } from "@ant-design/icons";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -25,16 +27,21 @@ import { ModalLoaderContext } from "../../utils/modal";
 import { useParams } from "react-router-dom";
 import { appConfig } from "../../config/app";
 import { MembershipModal } from "./MembershipModal";
+import moment from "moment";
 
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 export const DetailUser = observer(() => {
   const store = useStore();
+  const [form] = Form.useForm();
   const modalLoader = useContext(ModalLoaderContext);
   const { id } = useParams();
   const [visibleModal, setVisibleModal] = useState(false);
   const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
+  const [filterStart, setFilterStart] = useState([]);
+  const [filterEnd, setFilterEnd] = useState([]);
+  const [visibleHis, setVisibleHis] = useState(true);
 
   useEffect(() => {
     (async () => {
@@ -178,11 +185,15 @@ export const DetailUser = observer(() => {
   ];
 
   const column = [
+    {
+      title: "Nama Produk",
+      dataIndex: "name",
+      key: "name",
+    },
     {
       title: "Price",
       dataIndex: "price",
       key: "price",
-
       render: (text) =>
         new Intl.NumberFormat("id-ID", {
           style: "currency",
@@ -242,8 +253,13 @@ export const DetailUser = observer(() => {
       title: "Tanggal Transaksi",
       dataIndex: "created_at",
       key: "created_at",
+      width: "15%",
       render: (text, record) => {
-        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
+        return (
+          <Text>
+            {format(parseISO(record.created_at), "dd-MM-yyyy HH:mm:ss")}
+          </Text>
+        );
       },
     },
     {
@@ -298,7 +314,79 @@ export const DetailUser = observer(() => {
     store.authentication.dataProfit.userDetail?.image_identity,
     "detail"
   );
-  console.log(store.authentication.listImage, "detail gambar");
+
+  const handleRemoveFilter = async () => {
+    store.transaction.filterStart = null;
+    store.transaction.filterEnd = null;
+    form.resetFields();
+    setFilterStart([]);
+    setFilterEnd([]);
+    //await store.transaction.getDetailHistoryTransaction();
+    await store.transaction.getDetailHistoryTransaction(
+      store.authentication.dataProfit.id
+    );
+    store.transaction.visibleModalFilterTransaction = false;
+  };
+
+  const handleCancelFilter = async () => {
+    store.transaction.filterStart = null;
+    //form.resetFields();
+    store.transaction.filterEnd = null;
+    store.transaction.visibleModalFilterTransaction = false;
+    //await store.transaction.getDetailHistoryTransaction();
+    await store.transaction.getDetailHistoryTransaction(
+      store.authentication.dataProfit.id
+    );
+  };
+
+  const handleSubmitFilter = async () => {
+    const data = form.getFieldsValue();
+    console.log(data.start_date);
+    console.log(data.end_date);
+
+    const awal = (store.transaction.filterStart = moment(
+      data.start_date
+    ).format("YYYY-MM-DD HH:mm:ss"));
+    const akhir = (store.transaction.filterEnd = moment(data.end_date).format(
+      "YYYY-MM-DD HH:mm:ss"
+    ));
+    console.log(awal);
+    console.log(akhir);
+    console.log(store.authentication.dataProfit.id, "id auth");
+    console.log(store.membership.dataDetail.id, "id member");
+    modalLoader.setLoading(true);
+    await store.transaction.getDetailHistoryTransaction(
+      store.authentication.dataProfit.id
+    );
+    modalLoader.setLoading(false);
+    //form.resetFields();
+    store.transaction.visibleModalFilterTransaction = false;
+  };
+  const footerLayoutFilter = [
+    <Button
+      key={"remove"}
+      onClick={handleRemoveFilter}
+      style={{
+        backgroundColor: "#e74e5e",
+        color: "#fff",
+      }}
+    >
+      Remove Filter
+    </Button>,
+    <Button key={"cancel"} onClick={handleCancelFilter}>
+      Cancel
+    </Button>,
+    <Button
+      key={"submit"}
+      onClick={handleSubmitFilter}
+      style={{
+        backgroundColor: "#4e79e7",
+        color: "#fff",
+      }}
+    >
+      Apply
+    </Button>,
+  ];
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
@@ -646,30 +734,42 @@ export const DetailUser = observer(() => {
               </TabPane>
               <TabPane tab="History Transaction" key="2">
                 {store.ui.mediaQuery.isDesktop && (
-                  <Table
-                    key="1"
-                    hasEmpty
-                    columns={column}
-                    dataSource={
-                      store.transaction.dataDetailHistoryTransactionDetailUser
-                    }
-                    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);
-                    }}
-                  />
+                  <div>
+                    <Button
+                      style={{ marginBottom: "1rem", marginLeft: 5 }}
+                      onClick={() => {
+                        store.transaction.visibleModalFilterTransaction = true;
+                      }}
+                    >
+                      <FilterOutlined />
+                      Filter
+                    </Button>
+                    <Table
+                      key="1"
+                      hasEmpty
+                      scroll={{ x: 1300 }}
+                      columns={column}
+                      dataSource={
+                        store.transaction.dataDetailHistoryTransactionDetailUser
+                      }
+                      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);
+                      }}
+                    />
+                  </div>
                 )}
 
                 {store.ui.mediaQuery.isMobile && (
@@ -790,6 +890,39 @@ export const DetailUser = observer(() => {
           setVisibleModal(false);
         }}
       />
+      <Modal
+        visible={store.transaction.visibleModalFilterTransaction}
+        title={"Filter"}
+        footer={footerLayoutFilter}
+        onCancel={async () => {
+          //form.resetFields();
+          store.transaction.filterStart = null;
+          store.transaction.filterEnd = null;
+          store.transaction.visibleModalFilterTransaction = false;
+          await store.transaction.getDetailHistoryTransaction();
+        }}
+      >
+        <Row>
+          <Col span={24}>
+            <Form layout="vertical" name="filter" form={form}>
+              <Form.Item
+                name="start_date"
+                label="Dari"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+              <Form.Item
+                name="end_date"
+                label="Sampai"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+            </Form>
+          </Col>
+        </Row>
+      </Modal>
     </div>
   );
 });
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 522fd45..48ed67e 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -195,6 +195,12 @@ export const Membership = observer(() => {
       key: "name",
       render: (text, record) => record?.name ?? record?.username,
     },
+    {
+      title: "Username",
+      dataIndex: "username",
+      key: "username",
+      render: (text, record) => record?.name ?? record?.username,
+    },
     {
       title: "Role",
       dataIndex: ["roles", "name"],
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 11b10aa..0eb67f6 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -128,6 +128,11 @@ export const Profile = observer(() => {
     </Button>,
   ];
   const columns = [
+    {
+      title: "Name Produk",
+      dataIndex: "name",
+      key: "name",
+    },
     {
       title: "Price",
       dataIndex: "price",
@@ -142,6 +147,7 @@ export const Profile = observer(() => {
       title: "Pembeli",
       dataIndex: "buyer",
       key: "buyer",
+      width: "10%",
     },
     {
       title: "Tujuan",
@@ -196,9 +202,13 @@ export const Profile = observer(() => {
       title: "Tanggal Transaksi",
       dataIndex: "created_at",
       key: "created_at",
-
+      width: "15%",
       render: (text, record) => {
-        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
+        return (
+          <Text>
+            {format(parseISO(record.created_at), "dd-MM-yyyy HH:mm:ss")}
+          </Text>
+        );
       },
     },
   ];
diff --git a/src/store/transaction.js b/src/store/transaction.js
index f10cb9e..d212316 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -143,7 +143,7 @@ export class Transaction {
 
   async getDetailHistoryTransaction(id) {
     try {
-      const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStartDetailUser}&end=${this.filterEndDetailUser}`);
+      const response = await http.get(`/transaction/history-user/${id}?page=${this.page}&pageSize=${this.pageSize}&start=${this.filterStart}&end=${this.filterEnd}`);
       console.log(response,'Data Trans');
       this.dataDetailHistoryTransactionDetailUser = response.body.data ?? [];
       this.total_data = response?.body?.count ?? 0;