Merge branch 'develop' of gitlab.com:empatnusabangsa/ppob/ppob-frontend into develop

src/component/CategoryComponent.js

@@ -0,0 +1,217 @@
+import React, {useEffect, useState} from "react";
+import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
+import {observer} from "mobx-react-lite";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+import {useHistory} from "react-router-dom";
+import {capitalize} from "lodash";
+import {useStore} from "../utils/useStore";
+import {LINKS} from "../routes/app";
+
+export const CategoryComponent = observer((props) => {
+    const store = useStore();
+    const [form] = Form.useForm();
+    const {Option} = Select;
+    const history = useHistory();
+    const [idData, setIdData] = useState('');
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        const init = async () => {
+            try {
+                setIsLoading(true);
+                //store.product.pageCategories=StrToLower(props.category)
+                await store.product.getDataSubCategories();
+                setIsLoading(false);
+            } catch (e) {
+                setIsLoading(false);
+            }
+        };
+
+        init();
+    }, []);
+
+    const handleEditButton = (data) => {
+        console.log(data, "isi data")
+        form.setFieldsValue({
+            name: data.name,
+        });
+        store.category.visibleModalCategory = true;
+        setIdData(data.id);
+    }
+
+    const columns = [
+        {
+            title: "Product Name",
+            dataIndex: "name",
+            key: "name",
+        },
+        // {
+        //     title: "Gangguan",
+        //     dataIndex: "status",
+        //     key: "status",
+        //     render: (text, record) => (
+        //         <Tag
+        //             color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
+        //             style={{color: "#4F566B"}}
+        //         >
+        //             {capitalize(record?.status)}
+        //         </Tag>
+        //     ),
+        // },
+        // {
+        //     title: "Tersedia",
+        //     dataIndex: "tersedia",
+        //     key: "tersedia",
+        //     render: (text, record) => (
+        //         <Tag
+        //             color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
+        //             style={{color: "#4F566B"}}
+        //         >
+        //             {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
+        //         </Tag>
+        //     ),
+        // },
+        {
+            title: "Action",
+            key: "action",
+            render: (text, record) => (
+                <Space size="middle">
+                    <Button
+                        onClick={() => handleEditButton(record)}
+                    >Edit</Button>
+                    <Button
+                        onClick={() => handleDelete(record.id)}
+                    >
+                        Delete
+                    </Button>
+                </Space>
+            ),
+        },
+    ];
+
+    const deleteData = async (id) => {
+        try {
+            console.log(id);
+            await store.category.delete(id);
+            message.success("Data Berhasil Dihapus");
+            history.push(LINKS.PRODUCT);
+        } catch (err) {
+            console.log("error", err);
+            message.error("Gagal menghapus");
+        }
+    };
+
+    const handleDelete = (id) => {
+        Modal.confirm({
+            title: "Are you sure delete this record?",
+            icon: <ExclamationCircleOutlined/>,
+            okText: "Yes",
+            okType: "primary",
+            cancelText: "Cancel",
+            onOk() {
+                return deleteData(id);
+            },
+            onCancel() {
+                console.log("Cancel");
+            },
+        });
+    };
+
+    const handleCancel = () => {
+        setIdData('')
+        store.category.visibleModalCategory = false;
+    }
+
+    const handleSubmit = async (data) => {
+        console.log(data, "isi data2")
+        if (idData !== '') {
+            setConfirmLoading(true);
+            try {
+                await store.category.update(idData, data)
+                message.success("Success Update Data Category")
+            } catch (e) {
+                message.error("Failed Update Data Category")
+            }
+            setConfirmLoading(false);
+            store.category.visibleModalCategory = false;
+            setIdData('');
+            form.resetFields();
+        } else {
+            setConfirmLoading(true);
+            try {
+                await store.category.create(data)
+                message.success("Success Add New Category")
+            } catch (e) {
+                console.log(e, "apa errornya")
+                message.error("Failed Add Category")
+            }
+            setConfirmLoading(false);
+            store.category.visibleModalCategory = false;
+            setIdData('');
+            form.resetFields();
+        }
+    }
+
+    return (
+        <div>
+            <Table
+                style={{textAlign: "center"}}
+                columns={columns}
+                dataSource={store.category.data}
+                bordered
+                pagination={{
+                    pageSize: store.product.pageSize,
+                    total: store.product.total_data,
+                    current: store.product.page + 1,
+                    showSizeChanger: true,
+                    simple: false
+                }}
+                onChange={async (page) => {
+                    let pageNumber = page.current;
+                    store.product.pageSize = page.pageSize;
+                    store.product.page = pageNumber - 1;
+                    // store.membership.isLoading = true;
+                    await store.product.getData();
+                    // store.membership.isLoading = false;
+                }}
+            />
+
+            <Modal
+                visible={store.category.visibleModalCategory}
+                title={idData ? "Edit Category" : "Create a new Category"}
+                okText={idData ? "Edit" : "Create"}
+                cancelText="Cancel"
+                onCancel={() => {
+                    form.resetFields();
+                    handleCancel();
+                }}
+                onOk={() => {
+                    form
+                        .validateFields()
+                        .then((values) => {
+                            console.log(values, "isi form")
+                            handleSubmit(values);
+                            form.resetFields();
+                        })
+                        .catch((info) => {
+                            console.error("Validate Failed:", info);
+                        });
+                }}
+            >
+                <Form
+                    form={form}
+                    layout="vertical"
+                >
+                    <Form.Item
+                        name="name"
+                        label="Name"
+                        rules={[{required: true, message: "Please input name category!"}]}
+                    >
+                        <Input/>
+                    </Form.Item>
+                </Form>
+            </Modal>
+        </div>
+    );
+});

src/component/PartnerComponent.js

@@ -72,7 +72,7 @@ export const PartnerComponent = observer((props) => {
       dataIndex: "status",
       key: "status",
       render: (text, record) => (
-        <Button type={record?.status === true ? "primary" : "danger"}>
+        <Button size="small" type={record?.status === true ? "primary" : "danger"}>
           {record?.status === true ? " ACTIVE" : "INACTIVE"} 
         </Button>
       ),

src/component/ProductComponent.js

@@ -20,6 +20,7 @@ export const ProductComponent = observer((props) => {
         const init = async () => {
             try {
                 setIsLoading(true);
+                //store.product.pageCategories=StrToLower(props.category)
                 await store.product.getDataSubCategories();
                 setIsLoading(false);
             } catch (e) {
@@ -71,7 +72,7 @@ export const ProductComponent = observer((props) => {
             key: "status",
             render: (text, record) => (
                 <Tag
-                    color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
+                    color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
                     style={{color: "#4F566B"}}
                 >
                     {capitalize(record?.status)}
@@ -84,7 +85,7 @@ export const ProductComponent = observer((props) => {
             key: "tersedia",
             render: (text, record) => (
                 <Tag
-                    color={record?.status === "ACTIVE" ? "processing" : "#E3E8EE"}
+                    color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
                     style={{color: "#4F566B"}}
                 >
                     {record?.status === "ACTIVE" ? " Ya" : "Tidak"}

src/component/SupplierComponent.js

@@ -125,6 +125,9 @@ export const SupplierComponent = observer((props) => {
     setIdData("");
     store.supplier.visibleModalSupplier = false;
   };
+  const handleCancelTransaction= () => {
+    store.supplier.visibleModalTransaction = false;
+  };
 
   const handleSubmit = async (data) => {
     console.log(data, "isi data2");
@@ -157,6 +160,24 @@ export const SupplierComponent = observer((props) => {
     }
   };
 
+  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();
+  };  
+
+  
+
   return (
     <div>
       <Table
@@ -220,6 +241,45 @@ export const SupplierComponent = observer((props) => {
           </Form.Item>
         </Form>
       </Modal>
+      <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!" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            name="amount"
+            label="Amount"
+            rules={[{ required: true, message: "Please input amount!" }]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   );
 });

src/pages/App/MenuList.js

@@ -4,10 +4,13 @@ import {Link} from "react-router-dom";
 import {
   AppstoreOutlined,
   DatabaseOutlined,
+  FileAddOutlined,
   FileProtectOutlined,
+  FileSyncOutlined,
   HomeOutlined,
   MenuUnfoldOutlined,
   MoneyCollectOutlined,
+  ProfileOutlined,
   ProjectOutlined,
   UserOutlined,
 } from "@ant-design/icons";
@@ -83,6 +86,40 @@ export const MenuList = observer((props) => {
           </Menu.Item>
         </SubMenu>
       )}
+      {store.authentication.userData.role !== "Retail" && (
+        <SubMenu
+        key="product"
+        icon={<ProfileOutlined />}
+        title="Product"
+      >
+        <Menu.Item key="product">
+          <Link to={LINKS.PRODUCT}>
+            <DatabaseOutlined />
+            <span>Product</span>
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="product">
+          <Link to={LINKS.CATEGORY}>
+          <FileAddOutlined />
+            <span>Category</span>
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="product">
+          <Link to={LINKS.PRODUCT}>
+          <FileSyncOutlined />
+            <span>Sub Category</span>
+          </Link>
+        </Menu.Item>
+        </SubMenu>
+      )}
+        {store.authentication.userData.role === ("Retail" || "Admin") && (
+            <Menu.Item key="transaction">
+              <Link to={LINKS.TRANSACTION}>
+                <HomeOutlined/>
+                <span>Transaction</span>
+              </Link>
+            </Menu.Item>
+        )}
         {store.authentication.userData.role !== "Retail" && (
             <Menu.Item key="product">
               <Link to={LINKS.PRODUCT}>
@@ -108,16 +145,16 @@ export const MenuList = observer((props) => {
         <Menu.Item key="profile">
           <Link to={LINKS.PROFILE}>
           <UserOutlined />
-          <span>Profile</span>
+            <span>Profile</span>
-        </Link>
+          </Link>
-      </Menu.Item>
+        </Menu.Item>
-      {/*<Menu.Item key="about">*/}
+        {/*<Menu.Item key="about">*/}
-      {/*	<Link to={'/app/about'}>*/}
+        {/*	<Link to={'/app/about'}>*/}
-      {/*		<CalendarOutlined/>*/}
+        {/*		<CalendarOutlined/>*/}
-      {/*		<span>About</span>*/}
+        {/*		<span>About</span>*/}
-      {/*	</Link>*/}
+        {/*	</Link>*/}
-      {/*</Menu.Item>*/}
+        {/*</Menu.Item>*/}
-      <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
+        <Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
-    </Menu>
+      </Menu>
   );
 });

src/pages/Config/Supplier.js

@@ -1,91 +1,97 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
-import {Button, Card, Col, Input, Row, Tabs} from "antd";
+import { Button, Card, Col, Input, Row, Tabs } from "antd";
-import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import { FilterOutlined, PlusSquareOutlined,DownloadOutlined } from "@ant-design/icons";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import {useStore} from "../../utils/useStore";
+import { useStore } from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
-import {SupplierComponent} from "../../component/SupplierComponent";
+import { SupplierComponent } from "../../component/SupplierComponent";
-import {LINKS} from "../../routes/app";
+import { LINKS } from "../../routes/app";
 
-const {TabPane} = Tabs;
+const { TabPane } = Tabs;
-const {Search} = Input;
+const { Search } = Input;
 
 export const Supplier = observer(() => {
-    const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
-    const store = useStore();
+  const store = useStore();
 
-    useEffect(() => {
+  useEffect(() => {
-        const init = async () => {
+    const init = async () => {
-            try {
+      try {
-                setIsLoading(true);
+        setIsLoading(true);
-                //await store.supplier.getDataCategories();
+        //await store.supplier.getDataCategories();
-                await store.supplier.getData();
+        await store.supplier.getData();
-                setIsLoading(false);
+        setIsLoading(false);
-            } catch (e) {
+      } catch (e) {
-                setIsLoading(false);
+        setIsLoading(false);
-            }
+      }
-        };
+    };
 
-        init();
+    init();
-    }, []);
+  }, []);
 
-    // const handleChangeTabPane = async (key) => {
+  // const handleChangeTabPane = async (key) => {
-    //     store.product.filterCategory = key;
+  //     store.product.filterCategory = key;
-    //     console.log(key);
+  //     console.log(key);
-    // };
+  // };
 
-    const routeData = [
+  const routeData = [
-        {
+    {
-            route: LINKS.HOME,
+      route: LINKS.HOME,
-            name: "Home",
+      name: "Home",
-        },
+    },
-        {
+    {
-            route: LINKS.SUPPLIER,
+      route: LINKS.SUPPLIER,
-            name: <span style={{fontWeight: 'bold'}}>Supplier</span>,
+      name: <span style={{ fontWeight: "bold" }}>Supplier</span>,
-        },
+    },
-    ];
+  ];
-   
+
-    return (
+  return (
-        <div className={["ppob-container"].join(" ")}>
+    <div className={["ppob-container"].join(" ")}>
-            <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
-            <Card>
+      <Card>
-                <Row style={{marginBottom: 20}}>
+        <Row style={{ marginBottom: 20 }}>
-                    <Col span={12}>
+          <Col span={12}>
-                        <Button>
+            <Button>
-                            <FilterOutlined/>
+              <FilterOutlined />
-                            Filter
+              Filter
-                        </Button>
+            </Button>
-                    </Col>
+          </Col>
-                    <Col span={12} style={{textAlign: "right"}}>
+          <Col span={12} style={{ textAlign: "right" }}>
-                        <Search
+            <Search
-                            placeholder="input search text"
+              placeholder="input search text"
-                            style={{
+              style={{
-                                width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-                              }}
+              }}
-                            onSearch={value => console.log(value)}
+              onSearch={(value) => console.log(value)}
-                        />
+            />
-                        <Button onClick={() =>  store.supplier.visibleModalSupplier = true}>
+            <Button
-                            <PlusSquareOutlined/> New
+              //style={{ marginLeft: "10px" }}
-                        </Button>
+              onClick={() => (store.supplier.visibleModalSupplier = true)}
-                    </Col>
+            >
-                </Row>
+              <PlusSquareOutlined /> New
-                <Tabs
+            </Button>
-                    //onChange={handleChangeTabPane}
+          </Col>
-                    size="default"
+        </Row>
-                    tabBarGutter="50"
+        <Col span={24} style={{ textAlign: "right" }}>
-                >
+          <Button
-                    
+            onClick={() => (store.supplier.visibleModalTransaction = true)}
-                        <TabPane
+          >
-                            tab="Supplier"
+           <DownloadOutlined /> Top Up Saldo
-                            key="1"
+          </Button>
-                        >
+        </Col>
-                            <SupplierComponent/>
+        <Tabs
-                        </TabPane>
+          //onChange={handleChangeTabPane}
-                    ))
+          size="default"
-                </Tabs>
+          tabBarGutter="50"
-            </Card>
+        >
-        </div>
+          <TabPane tab="Supplier" key="1">
-    );
+            <SupplierComponent />
+          </TabPane>
+          ))
+        </Tabs>
+      </Card>
+    </div>
+  );
 });

src/pages/Membership/Membership.js

@@ -48,7 +48,7 @@ export const Membership = observer(() => {
       key: "status",
       render: (text, record) => (
         <Tag
-          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          color={record?.isActive === true ? "blue" : "#E3E8EE"}
           style={{ color: "#4F566B" }}
         >
           {record?.isActive === true ? " ACTIVE" : "INACTIVE"}

src/pages/Payback/Payback.js

@@ -53,7 +53,7 @@ export const Payback = observer(() => {
             amount: "Rp. 1.000.000",
         },
         {
-            key: '4',Z
+            key: '4',
             id: 1,
             name: "John Doe",
             picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",

src/pages/Product/Category.js

@@ -0,0 +1,83 @@
+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 { LINKS } from "../../routes/app";
+import { CategoryComponent } from "../../component/CategoryComponent";
+
+const { TabPane } = Tabs;
+const { Search } = Input;
+
+export const Category = observer(() => {
+  const [isLoading, setIsLoading] = useState(false);
+  const store = useStore();
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        //await store.product.getDataCategories();
+        await store.category.getData();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
+
+    init();
+  }, []);
+
+  const handleChangeTabPane = async (key) => {
+    store.product.filterCategory = key;
+    console.log(key);
+  };
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.CATEGORY,
+      name: <span style={{ fontWeight: "bold" }}>Category</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.category.visibleModalCategory = true)}>
+              <PlusSquareOutlined /> New
+            </Button>
+          </Col>
+        </Row>
+
+        <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
+            <TabPane tab="Category" key="1">
+              <CategoryComponent/>
+            </TabPane>
+          ))}
+        </Tabs>
+      </Card>
+    </div>
+  );
+});

src/pages/Product/Product.js

@@ -1,91 +1,86 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
-import {Button, Card, Col, Input, Row, Tabs} from "antd";
+import { Button, Card, Col, Input, Row, Tabs } from "antd";
-import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import {useStore} from "../../utils/useStore";
+import { useStore } from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
-import {ProductComponent} from "../../component/ProductComponent";
+import { ProductComponent } from "../../component/ProductComponent";
-import {LINKS} from "../../routes/app";
+import { LINKS } from "../../routes/app";
 
-const {TabPane} = Tabs;
+const { TabPane } = Tabs;
-const {Search} = Input;
+const { Search } = Input;
 
 export const Product = observer(() => {
-    const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
-    const store = useStore();
+  const store = useStore();
 
-    useEffect(() => {
+  useEffect(() => {
-        const init = async () => {
+    const init = async () => {
-            try {
+      try {
-                setIsLoading(true);
+        setIsLoading(true);
-                await store.product.getDataCategories();
+        await store.product.getDataCategories();
-                await store.product.getData();
+        await store.product.getData();
-                setIsLoading(false);
+        setIsLoading(false);
-            } catch (e) {
+      } catch (e) {
-                setIsLoading(false);
+        setIsLoading(false);
-            }
+      }
-        };
-
-        init();
-    }, []);
-
-    const handleChangeTabPane = async (key) => {
-        store.product.filterCategory = key;
-        console.log(key);
-        await store.product.getData()
     };
 
-    const routeData = [
+    init();
-        {
+  }, []);
-            route: LINKS.HOME,
-            name: "Home",
-        },
-        {
-            route: LINKS.PRODUCT,
-            name: <span style={{fontWeight: 'bold'}}>Product</span>,
-        },
-    ];
 
-    return (
+  const handleChangeTabPane = async (key) => {
-        <div className={["ppob-container"].join(" ")}>
+    store.product.filterCategory = key;
-            <BreadcumbComponent data={routeData}/>
+    console.log(key);
-            <Card>
+    await store.product.getData();
-                <Row style={{marginBottom: 20}}>
+  };
-                    <Col span={12}>
+
-                        <Button>
+  const routeData = [
-                            <FilterOutlined/>
+    {
-                            Filter
+      route: LINKS.HOME,
-                        </Button>
+      name: "Home",
-                    </Col>
+    },
-                    <Col span={12} style={{textAlign: "right"}}>
+    {
-                        <Search
+      route: LINKS.PRODUCT,
-                            placeholder="input search text"
+      name: <span style={{ fontWeight: "bold" }}>Product</span>,
-                            style={{
+    },
-                                width: store.ui.mediaQuery.isMobile ? 160 : 200,
+  ];
-                                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+
-                                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+  return (
-                              }}
+    <div className={["ppob-container"].join(" ")}>
-                        />
+      <BreadcumbComponent data={routeData} />
-                        <Button onClick={() => store.product.visibleModalProduct = true}>
+      <Card>
-                            <PlusSquareOutlined/> New
+        <Row style={{ marginBottom: 20 }}>
-                        </Button>
+          <Col span={12}>
-                    </Col>
+            <Button>
-                </Row>
+              <FilterOutlined />
-                <Tabs
+              Filter
-                    onChange={handleChangeTabPane}
+            </Button>
-                    size="default"
+          </Col>
-                    tabBarGutter="50"
+          <Col span={12} style={{ textAlign: "right" }}>
-                >
+            <Search
-                    {store.product.dataCategories.map((item) => (
+              placeholder="input search text"
-                        <TabPane
+              style={{
-                            tab={item.name}
+                width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                            key={item.id}
+                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                        >
+                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-                            <ProductComponent/>
+              }}
-                        </TabPane>
+            />
-                    ))}
+            <Button onClick={() => (store.product.visibleModalProduct = true)}>
-                </Tabs>
+              <PlusSquareOutlined /> New
-            </Card>
+            </Button>
-        </div>
+          </Col>
-    );
+        </Row>
+
+        <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
+          {store.product.dataCategories.map((item) => (
+            <TabPane tab={item.name} key={item.id}>
+              {/* <ProductComponent category={item.name} /> */}
+              <ProductComponent />
+            </TabPane>
+          ))}
+        </Tabs>
+      </Card>
+    </div>
+  );
 });

src/routes/app.js

@@ -8,6 +8,7 @@ import {Profile} from "../pages/Profile/Profile";
 import {Commission} from "../pages/Config/Commission";
 import {Partner} from "../pages/Config/Partner";
 import {Supplier} from "../pages/Config/Supplier";
+import {Category} from "../pages/Product/Category";
 import {Payback} from "../pages/Payback/Payback";
 
 
@@ -21,6 +22,7 @@ export const LINKS = {
     PARTNER: "/app/partner",
     COMMISSION: "/app/commission",
     SUPPLIER: "/app/supplier",
+    CATEGORY: "/app/category",
     PAYBACK: "/app/payback",
 
 };
@@ -33,6 +35,9 @@ export const AppRoute = () => {
         <Route path={LINKS.COMMISSION}>
             <Commission/>
         </Route>
+        <Route path={LINKS.CATEGORY}>
+            <Category/>
+        </Route>
         <Route path={LINKS.SUPPLIER}>
             <Supplier/>
         </Route>

src/store/category.js

@@ -0,0 +1,69 @@
+import {makeAutoObservable} from "mobx";
+import {http} from "../utils/http";
+
+export class Category {
+    page = 0;
+    pageSize = 10
+    data = [];
+    total_data = 0;
+    filterCategory = null;
+    visibleModalCategory = false;
+
+    pageCategories = 0;
+    pageSizeCategories = 10
+    dataCategories = [];
+    total_dataCategories = 0;
+
+    pageSubCategories = 0;
+    pageSizeSubCategories = 10
+    dataSubCategories = [];
+    total_dataSubCategories = 0;
+
+    constructor(ctx) {
+        this.ctx = ctx;
+        makeAutoObservable(this);
+    }
+
+    async getData() {
+        const response = await http.get(`/product/categories?page=${this.page}&pageSize=${this.pageSize}`);
+        console.log(response)
+        this.data = response.body.data ?? []
+        this.total_data = response.body.total_data ?? 0
+    }
+
+    async getDataSubCategories() {
+        const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
+        this.dataSubCategories = response.body.data ?? []
+        this.total_dataSubCategories = response.body.count ?? 0
+    }
+
+    async getDataCategories() {
+        const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
+
+        this.dataCategories = response.body.data ?? []
+        this.total_dataCategories = response.body.total_data ?? 0
+        if (this.dataCategories.length > 0) {
+            this.filterCategory = this.dataCategories[0].id
+        }
+    }
+
+    async create(data) {
+        const response = await http.post('/product/categories').send(data);
+        await this.getData();
+        return response;
+    }
+
+    async update(id, data) {
+        const response = await http.put(`/product/categories/${id}`).send(data);
+        await this.getData();
+        return response;
+    }
+
+    async delete(id) {
+        const response = await http.del(`/product/${id}`);
+        await this.getData();
+        return response;
+    }
+}
+
+

src/store/index.js

@@ -8,6 +8,8 @@ import { Supplier } from "./supplier";
 import { Commission } from "./commission";
 import { Transaction } from "./transaction";
 import { TokenUtil } from "../utils/token";
+import { Category } from "./category";
+
 import { Role } from "./role";
 
 export class Store {
@@ -19,6 +21,7 @@ export class Store {
     partner = new Partner(this);
     supplier = new Supplier(this);
     commission = new Commission(this);
+    category = new Category(this);
     transaction = new Transaction(this);
     role = new Role(this);
 

src/store/membership.js

@@ -14,10 +14,16 @@ export class Membership {
 
     @action
     async getData() {
-        const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
+        const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`);
+        console.log(response)
         this.data = response.body.data ?? []
         this.total_data = response.body.total_data ?? 0
     }
+    // async getData() {
+    //     const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
+    //     this.data = response.body.data ?? []
+    //     this.total_data = response.body.total_data ?? 0
+    // }
 
     @action
     async create(data) {

src/store/supplier.js

@@ -8,6 +8,7 @@ export class Supplier {
     total_data = 0;
     filterCategory = null;
     visibleModalSupplier = false;
+    visibleModalTransaction=false;
 
     pageCategories = 0;
     pageSizeCategories = 10
@@ -36,9 +37,14 @@ export class Supplier {
         await this.getData();
         return response;
     }
+    async createTransaction(data) {
+        const response = await http.post('/transaction/add-saldo-supplier').send(data);
+        await this.getData();
+        return response;
+    }
 
     async update(id, data) {
-        const response = await http.put(`/product/${id}`).send(data);
+        const response = await http.put(`/users/supplier/${id}`).send(data);
         await this.getData();
         return response;
     }