diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index ec308be..09aca03 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
+import React, {useState} from "react";
+import {Button, Col, Form, Input, message, Modal, Row, Select, Space, Table, Tag, Typography} from "antd";
 import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
@@ -7,6 +7,8 @@ import {capitalize} from "lodash";
 import {useStore} from "../utils/useStore";
 import {LINKS} from "../routes/app";
 
+const {Title, Text} = Typography;
+
 export const ProductComponent = observer((props) => {
     const store = useStore();
     const [form] = Form.useForm();
@@ -15,21 +17,9 @@ export const ProductComponent = observer((props) => {
     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 [filterSupplier, setFilterSupplier] = useState(null);
+    const [filterCategories, setFilterCategories] = useState(null);
+    const [filterSubCategories, setFilterSubCategories] = useState(null);
 
     const handleEditButton = (data) => {
         console.log(data, "isi data")
@@ -173,6 +163,42 @@ export const ProductComponent = observer((props) => {
         }
     }
 
+    const handleRemoveFilter = async () => {
+        store.product.filterSupplier = null;
+        store.product.filterCategory = null;
+        store.product.filterSubCategory = null;
+        setFilterSupplier(null);
+        setFilterCategories(null);
+        setFilterSubCategories(null);
+        await store.product.getData();
+        store.product.visibleModalFilterProduct = false;
+    };
+
+    const handleCancelFilter = () => {
+        setFilterSupplier(null);
+        setFilterCategories(null);
+        setFilterSubCategories(null);
+        store.product.visibleModalFilterProduct = false;
+    };
+
+    const handleSubmitFilter = async () => {
+        store.product.filterSupplier = filterSupplier;
+        store.product.filterCategory = filterCategories;
+        store.product.filterSubCategory = filterSubCategories;
+        await store.product.getData();
+        store.product.visibleModalFilterProduct = 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>
             <Table
@@ -276,6 +302,66 @@ export const ProductComponent = observer((props) => {
                     </Form.Item>
                 </Form>
             </Modal>
+
+            <Modal
+                visible={store.product.visibleModalFilterProduct}
+                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%"}}
+                        >
+                            {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={(val) => {
+                                setFilterCategories(val);
+                            }}
+                            style={{marginBottom: "20px", width: "100%"}}
+                        >
+                            {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%"}}
+                        >
+                            {store.category.dataSubCategories.map((item) => (
+                                <Option value={item.id} key={item.id}>
+                                    {item.name}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Col>
+                </Row>
+            </Modal>
         </div>
     );
 });
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 7324cde..d5e4c40 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -1,33 +1,32 @@
-import React, { useEffect, useState } from "react";
-import { Button, Card, Col, Input, Row, Select, Tabs, Upload } from "antd";
-import {
-  FilterOutlined,
-  PlusSquareOutlined,
-  UploadOutlined,
-} from "@ant-design/icons";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
-import { ProductComponent } from "../../component/ProductComponent";
-import { LINKS } from "../../routes/app";
+import React, {useEffect, useState} from "react";
+import {Button, Card, Col, Input, Row, Select, Tabs, Upload} from "antd";
+import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {ProductComponent} from "../../component/ProductComponent";
+import {LINKS} from "../../routes/app";
 
-const { TabPane } = Tabs;
-const { Search } = Input;
-const { Option } = Select;
+const {TabPane} = Tabs;
+const {Search} = Input;
+const {Option} = Select;
 
 export const Product = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
-  const [uploadProduct, setUpload] = useState(true);
   const store = useStore();
 
   useEffect(() => {
     const init = async () => {
       try {
         setIsLoading(true);
-        await store.supplier.getData();
-        await store.product.getDataCategories();
+        await Promise.allSettled([
+          store.supplier.getData(),
+          store.product.getDataCategories(),
+          store.product.getDataSubCategories(),
+          store.category.getData(),
+          store.category.getDataSubCategories(),
+        ]);
         await store.product.getData();
-        //await store.supplier.data;
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -47,57 +46,45 @@ export const Product = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Product</span>,
     },
   ];
- 
+
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
-        <Row style={{ marginBottom: 20 }}>
+        <Row style={{marginBottom: 20}}>
           <Col span={12}>
-            {/* <Button>
-              <FilterOutlined />
+            <Button onClick={() => {
+              store.product.visibleModalFilterProduct = 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,
-              }}
-            />
-            <Button onClick={() => (store.product.visibleModalProduct = true)}>
-              <PlusSquareOutlined /> New
             </Button>
           </Col>
-        </Row>
-        <Row>
-          <Col span={20}>
-            <Select
-              placeholder="Choose Supplier"
-              onChange={(val) => {
-                val ? setUpload(false) : setUpload(true);
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
-            >
-              {store.supplier.data.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select>
-          </Col>
-          <Col style={{ marginLeft: "10px" }}>
-            <Upload>
-              <Button disabled={uploadProduct} icon={<UploadOutlined />}>
-                Upload Product
+          <Col span={12}>
+            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+              <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,
+                  }}
+              />
+              <Upload>
+                <Button disabled={store.product.uploadBtnProduct} style={{
+                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                }} icon={<UploadOutlined/>}>
+                  Upload Product
+                </Button>
+              </Upload>
+              <Button onClick={() => (store.product.visibleModalProduct = true)}>
+                <PlusSquareOutlined/> New
               </Button>
-            </Upload>
+            </div>
           </Col>
         </Row>
-        <ProductComponent />
+        <ProductComponent/>
       </Card>
     </div>
   );
diff --git a/src/store/category.js b/src/store/category.js
index 895de03..d84cce9 100644
--- a/src/store/category.js
+++ b/src/store/category.js
@@ -9,11 +9,6 @@ export class Category {
     filterCategory = null;
     visibleModalCategory = false;
 
-    pageCategories = 0;
-    pageSizeCategories = 10
-    dataCategories = [];
-    total_dataCategories = 0;
-
     pageSubCategories = 0;
     pageSizeSubCategories = 10
     dataSubCategories = [];
@@ -37,16 +32,6 @@ export class Category {
         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();
diff --git a/src/store/product.js b/src/store/product.js
index e04edd1..39cc536 100644
--- a/src/store/product.js
+++ b/src/store/product.js
@@ -6,8 +6,12 @@ export class Product {
     pageSize = 10
     data = [];
     total_data = 0;
+    filterSupplier = null;
     filterCategory = null;
+    filterSubCategory = null;
     visibleModalProduct = false;
+    visibleModalFilterProduct = false;
+    uploadBtnProduct = false;
 
     pageCategories = 0;
     pageSizeCategories = 10
@@ -25,8 +29,7 @@ export class Product {
     }
 
     async getData() {
-        const response = await http.get(`/product/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`);
-
+        const response = await http.get(`/product/all?supplier=${this.filterSupplier}&categories=${this.filterCategory}&categories=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
         this.data = response.body.data.map((item, idx) => {
             item.key = idx;
             return item
@@ -46,7 +49,6 @@ export class Product {
 
     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