Perbaikan PPOB

src/pages/Membership/FilterUser.js

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+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();
+
+  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>
+  );
+});

src/pages/Membership/Membership.js

@@ -13,10 +13,17 @@ import {
   Space,
   Table,
   Tag,
+  Select,
+  Option,
+  Typography,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import {
+  DownloadOutlined,
+  PlusSquareOutlined,
+  FilterOutlined,
+} from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
@@ -25,6 +32,8 @@ import { ModalLoaderContext } from "../../utils/modal";
 
 export const Membership = observer(() => {
   const history = useHistory();
+  const { Option } = Select;
+  const { Title } = Typography;
   const [form] = Form.useForm();
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
@@ -33,14 +42,17 @@ export const Membership = observer(() => {
   const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
   const modalLoader = useContext(ModalLoaderContext);
+  const [filterMembership, setFilterMembership] = useState([]);
+  const [filterPartner, setFilterPartner] = useState([]);
 
   useEffect(() => {
     const init = async () => {
       try {
         modalLoader.setLoading(true);
         const isAdmin = store.authentication.userData.role === "Admin";
-
         await getData();
+        await store.membership.getDataBySuperior();
+        await store.partner.getData();
         await store.role.getData(isAdmin);
         modalLoader.setLoading(false);
       } catch (e) {
@@ -81,6 +93,59 @@ export const Membership = observer(() => {
     }
   };
 
+  const handleRemoveFilter = async () => {
+    store.membership.filterMembership = null;
+    store.membership.filterPartner = null;
+    setFilterMembership([]);
+    setFilterPartner([]);
+    //store.product.filterCategory = null;
+    //setFilterSubCategories([]);
+    await store.membership.getData();
+    store.membership.visibleModalFiltermembership = false;
+  };
+  const handleCancelFilter = () => {
+    setFilterMembership([]);
+    setFilterPartner([]);
+    //store.product.filterCategory = null;
+    //setFilterSubCategories([]);
+    store.membership.visibleModalFilterMembership = false;
+  };
+
+  const handleSubmitFilter = async () => {
+    store.membership.filterMembership = filterMembership;
+    store.membership.filterPartner = filterPartner;
+    modalLoader.setLoading(true);
+    await store.membership.getData();
+    //await store.product.getData();
+    modalLoader.setLoading(false);
+    store.membership.visibleModalFilterMembership = 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>,
+  ];
   const handleCancelTransaction = () => {
     setIsVisibleTopUpModal(false);
     setDestination(null);
@@ -238,10 +303,16 @@ export const Membership = observer(() => {
         <div>
           <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
-              {/* <Button>
-                <FilterOutlined />
-                Filter
-              </Button> */}
+              {store.authentication.userData.role === "Admin" && (
+                <Button
+                  onClick={() => {
+                    store.membership.visibleModalFilterMembership = true;
+                  }}
+                >
+                  <FilterOutlined />
+                  Filter
+                </Button>
+              )}
             </Col>
             <Col span={12} style={{ textAlign: "right" }}>
               {/* <Search
@@ -438,6 +509,58 @@ export const Membership = observer(() => {
           setVisibleModal(false);
         }}
       />
+      <Modal
+        visible={store.membership.visibleModalFilterMembership}
+        title={"Filter"}
+        footer={footerLayoutFilter}
+      >
+        <Row>
+          <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              Atasan/Superior
+            </Title>
+            <Select
+              mode={"multiple"}
+              placeholder="Choose Superior"
+              onChange={(val) => {
+                setFilterMembership(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterMembership}
+            >
+              {store.membership.data.map((item) => (
+                <Option value={item.name} key={item.name}>
+                  {item.name}
+                </Option>
+              ))}
+            </Select>
+          </Col>
+          <Col span={24}>
+            <Title level={5} type={"secondary"} strong>
+              Type
+            </Title>
+            <Select
+              mode={"multiple"}
+              placeholder="Choose Type"
+              //onChange={async (val) => handleFilterPartner(val)}
+              onChange={(val) => {
+                setFilterPartner(val);
+              }}
+              style={{ marginBottom: "20px", width: "100%" }}
+              value={filterPartner}
+              // value={store.membership.filterMembership || []}
+            >
+              <Option value="partner">Partner</Option>
+              <Option value="b2c">B2C</Option>
+              {/* {store.partner.data.map((item) => (
+                <Option value={item.id} key={item.id}>
+                  {item.name}
+                </Option>
+              ))} */}
+            </Select>
+          </Col>
+        </Row>
+      </Modal>
     </div>
   );
 });

src/pages/Membership/MembershipModal.js

@@ -1,7 +1,17 @@
 import React, { useState } from "react";
-import { Form, Input, Modal, Select, InputNumber } from "antd";
+import {
+  Form,
+  Input,
+  Modal,
+  Select,
+  InputNumber,
+  Row,
+  Col,
+  Typography,
+} from "antd";
 import { useStore } from "../../utils/useStore";
 
+const { Title, Text } = Typography;
 export const MembershipModal = ({
   visible,
   onCreate,