Pages Supplier

src/pages/Config/Commission.js

@@ -1,90 +1,73 @@
-import React, {useEffect, useState} from "react";
-import {Button, Card, Col, Input, Row, Tabs} 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 {CommissionComponent} from "../../component/CommissionComponent";
-import {LINKS} from "../../routes/app";
+import React, { useEffect, useState } from "react";
+import { Button, Card, Col, Input, Row, Tabs } 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 { CommissionComponent } from "../../component/CommissionComponent";
+import { LINKS } from "../../routes/app";
 
-const {TabPane} = Tabs;
-const {Search} = Input;
+const { TabPane } = Tabs;
+const { Search } = Input;
 
 export const Commission = observer(() => {
-    const [isLoading, setIsLoading] = useState(false);
-    const store = useStore();
+  const [isLoading, setIsLoading] = useState(false);
+  const store = useStore();
 
-    useEffect(() => {
-        const init = async () => {
-            try {
-                setIsLoading(true);
-                //await store.commission.getDataCategories();
-                await store.commission.getData();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        //await store.commission.getDataCategories();
+        await store.commission.getData();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
 
-        init();
-    }, []);
+    init();
+  }, []);
 
-    // const handleChangeTabPane = async (key) => {
-    //     store.product.filterCategory = key;
-    //     console.log(key);
-    // };
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.COMMISSION,
+      name: <span style={{ fontWeight: "bold" }}>Commission</span>,
+    },
+  ];
 
-    const routeData = [
-        {
-            route: LINKS.HOME,
-            name: "Home",
-        },
-        {
-            route: LINKS.COMMISSION,
-            name: <span style={{fontWeight: 'bold'}}>Commission</span>,
-        },
-    ];
-
-    return (
-        <div className={["ppob-container"].join(" ")}>
-            <BreadcumbComponent data={routeData}/>
-            <Card>
-                <Row style={{marginBottom: 20}}>
-                    <Col span={12}>
-                        <Button>
-                            <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,
-                              }}
-                        />
-                        <Button onClick={() => store.partner.visibleModalPartner = true}>
-                            <PlusSquareOutlined/> New
-                        </Button>
-                    </Col>
-                </Row>
-                <Tabs
-                    //onChange={handleChangeTabPane}
-                    size="default"
-                    tabBarGutter="50"
-                >
-                    
-                        <TabPane
-                            tab="Commision"
-                            key="1"
-                        >
-                            <CommissionComponent/>
-                        </TabPane>
-                    ))
-                </Tabs>
-            </Card>
-        </div>
-    );
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <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.commission.visibleModalCommission = true)}>
+              <PlusSquareOutlined /> New
+            </Button>
+          </Col>
+        </Row> */}
+        <div style={{marginTop:20}}> <CommissionComponent/></div>
+       
+      </Card>
+    </div>
+  );
 });

src/pages/Config/Supplier.js

@@ -47,28 +47,6 @@ export const Supplier = observer(() => {
     init();
   }, []);
 
-  // const handleChangeTabPane = async (key) => {
-  //     store.product.filterCategory = key;
-  //     console.log(key);
-  // };
-  const handleCancelTransaction = () => {
-    store.supplier.visibleModalTransaction = false;
-  };
-  const handleSubmitTransaction = async (data) => {
-    console.log(data, "isi data2");
-    setConfirmLoading(true);
-    try {
-      await store.supplier.createTransaction(data);
-      message.success("Success Top Up");
-      //await store.supplier.getData()
-    } catch (e) {
-      console.log(e, "apa errornya");
-      message.error("Failed Top Up");
-    }
-    setConfirmLoading(false);
-    store.supplier.visibleModalTransaction = false;
-    form.resetFields();
-  };
   const routeData = [
     {
       route: LINKS.HOME,
@@ -79,19 +57,19 @@ export const Supplier = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Supplier</span>,
     },
   ];
-  
+
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
         <Row style={{ marginBottom: 20 }}>
-          <Col span={12}>
+          {/* <Col span={12}>
             <Button>
               <FilterOutlined />
               Filter
             </Button>
-          </Col>
-          <Col span={12} style={{ textAlign: "right" }}>
+          </Col> */}
+          <Col span={24} style={{ textAlign: "right" }}>
             <Search
               placeholder="input search text"
               style={{
@@ -102,76 +80,14 @@ export const Supplier = observer(() => {
               onSearch={(value) => console.log(value)}
             />
             <Button
-              //style={{ marginLeft: "10px" }}
               onClick={() => (store.supplier.visibleModalSupplier = true)}
             >
               <PlusSquareOutlined /> New
             </Button>
           </Col>
         </Row>
-        <Col span={24} style={{ textAlign: "right" }}>
-          <Button
-            onClick={() => (store.supplier.visibleModalTransaction = true)}
-          >
-            <DownloadOutlined /> Top Up Saldo
-          </Button>
-        </Col>
-        <Tabs
-          //onChange={handleChangeTabPane}
-          size="default"
-          tabBarGutter="50"
-        >
-          <TabPane tab="Supplier" key="1">
-            <SupplierComponent />
-          </TabPane>
-          ))
-        </Tabs>
+        <SupplierComponent />
       </Card>
-      <Modal
-        visible={store.supplier.visibleModalTransaction}
-        title="Top Up Saldo"
-        okText="Top Up"
-        cancelText="Cancel"
-        onCancel={() => {
-          form.resetFields();
-          handleCancelTransaction();
-        }}
-        onOk={() => {
-          form
-            .validateFields()
-            .then((values) => {
-              console.log(values, "isi form");
-              handleSubmitTransaction(values);
-              form.resetFields();
-            })
-            .catch((info) => {
-              console.error("Validate Failed:", info);
-            });
-        }}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item
-            name="supplier"
-            label="Supplier"
-            rules={[{ required: true, message: "Please input supplier!" }]}
-          >
-            <Select placeholder="Select Code Supplier" allowClear>
-              {store.supplier.data.map((item) => (
-                <Option value={item.code} key={item.code}>
-                  {item.code}
-                </Option>
-              ))}
-            </Select>
-          </Form.Item>
-          <Form.Item
-            name="amount"
-            label="Amount"
-            rules={[{ required: true, message: "Please input amount!" }]}
-          >
-            <Input />
-          </Form.Item>
-        </Form>
-      </Modal>
     </div>
   );
 });

src/pages/Membership/Membership.js

@@ -12,6 +12,8 @@ import {
   Space,
   Table,
   Tag,
+  Form,
+  Select,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -19,14 +21,16 @@ import {
   ExclamationCircleOutlined,
   FilterOutlined,
   PlusSquareOutlined,
+  DownloadOutlined,
 } from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
 
 const { Search } = Input;
-
+const { Option } = Select;
 export const Membership = observer(() => {
+  const [form] = Form.useForm();
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
   const [initialData, setInitialData] = useState({});
@@ -62,6 +66,24 @@ export const Membership = observer(() => {
       message.error(`Failed ${status2} Membership`);
     }
   };
+  const handleCancelTransaction = () => {
+    store.supplier.visibleModalTransaction = false;
+  };
+  const handleSubmitTransaction = async (data) => {
+    console.log(data, "isi data2");
+    setConfirmLoading(true);
+    try {
+      await store.supplier.createTransaction(data);
+      message.success("Success Top Up");
+      //await store.supplier.getData()
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error("Failed Top Up");
+    }
+    setConfirmLoading(false);
+    store.supplier.visibleModalTransaction = false;
+    form.resetFields();
+  };
 
   const columns = [
     {
@@ -219,6 +241,19 @@ export const Membership = observer(() => {
               </Button>
             </Col>
           </Row>
+          <Col
+            span={24}
+            style={{
+              textAlign: "right",
+              marginBottom: store.ui.mediaQuery.isMobile ? 30 : 10,
+            }}
+          >
+            <Button
+              onClick={() => (store.supplier.visibleModalTransaction = true)}
+            >
+              <DownloadOutlined /> Top Up Saldo
+            </Button>
+          </Col>
           {store.ui.mediaQuery.isDesktop && (
             <Table
               key="1"
@@ -306,6 +341,51 @@ export const Membership = observer(() => {
           )}
         </div>
       </Card>
+      <Modal
+        visible={store.supplier.visibleModalTransaction}
+        title="Top Up Saldo"
+        okText="Top Up"
+        cancelText="Cancel"
+        onCancel={() => {
+          form.resetFields();
+          handleCancelTransaction();
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(values, "isi form");
+              handleSubmitTransaction(values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="supplier"
+            label="Supplier"
+            rules={[{ required: true, message: "Please input supplier!" }]}
+          >
+            <Select placeholder="Select Code Supplier" allowClear>
+              {store.supplier.data.map((item) => (
+                <Option value={item.code} key={item.code}>
+                  {item.code}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item
+            name="amount"
+            label="Amount"
+            rules={[{ required: true, message: "Please input amount!" }]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
       <MembershipModal
         visible={visibleModal}
         confirmLoading={confirmLoading}