diff --git a/package.json b/package.json
index 78c12c6..31c20a8 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "jest-watch-typeahead": "0.6.1",
     "less": "^3.11.1",
     "less-loader": "6.1.0",
+    "lodash": "^4.17.21",
     "mini-css-extract-plugin": "0.11.3",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
diff --git a/src/pages/Product/Pulsa.js b/src/component/ProductComponent.js
similarity index 61%
rename from src/pages/Product/Pulsa.js
rename to src/component/ProductComponent.js
index eafdfb9..19649c0 100644
--- a/src/pages/Product/Pulsa.js
+++ b/src/component/ProductComponent.js
@@ -1,30 +1,18 @@
-import React, {useEffect, useState} from "react";
+import React, {useState} from "react";
 import {Button, message, Modal, Space, Table, Tag} from "antd";
-import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined} from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
+import {capitalize} from "lodash";
+import {store} from "../utils/useStore";
+import {PulsaModal} from "../pages/Product/PulsaModal";
 
-export const Pulsa = observer(() => {
-    const store = useStore();
+export const ProductComponent = observer((props) => {
     const history = useHistory();
-    const [visibleModal, setVisibleModal] = useState(false);
     const [initialData, setInitialData] = useState({});
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
-    useEffect(() => {
-        const init = async () => {
-            try {
-                setIsLoading(true);
-                await store.product.getData();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };
 
-        init();
-    }, []);
     const columns = [
         {
             title: "Kode",
@@ -44,8 +32,8 @@ export const Pulsa = observer(() => {
         ,
         {
             title: "Harga Jual",
-            dataIndex: "mark_up_price",
-            key: "mark_up_price",
+            dataIndex: "base_price",
+            key: "base_price",
         },
         {
             title: "Gangguan",
@@ -56,7 +44,7 @@ export const Pulsa = observer(() => {
                     color={record?.status === "AKTIF" ? "processing" : "#E3E8EE"}
                     style={{color: "#4F566B"}}
                 >
-                    {record?.status}
+                    {capitalize(record?.status)}
                 </Tag>
             ),
         },
@@ -78,7 +66,12 @@ export const Pulsa = observer(() => {
             key: "action",
             render: (text, record) => (
                 <Space size="middle">
-                    <Button>Edit</Button>
+                    <Button
+                        onClick={() => {
+                            setInitialData(record);
+                            store.product.visibleModal = true;
+                        }}
+                    >Edit</Button>
                     <Button
                         onClick={async () => {
                             handleDelete(record.id);
@@ -90,6 +83,7 @@ export const Pulsa = observer(() => {
             ),
         },
     ];
+
     const deleteData = async (id) => {
         try {
             console.log(id);
@@ -101,6 +95,7 @@ export const Pulsa = observer(() => {
             message.error("Gagal menghapus");
         }
     };
+
     const handleDelete = (id) => {
         Modal.confirm({
             title: "Are you sure delete this record?",
@@ -116,14 +111,52 @@ export const Pulsa = observer(() => {
             },
         });
     };
+
+    const onSubmit = async (data) => {
+        if (initialData.id) {
+            setInitialData({})
+            setConfirmLoading(true);
+            try {
+                await store.product.update(initialData.id, data)
+                message.success("Success Update Data Member")
+            } catch (e) {
+                message.error("Failed Update Data Member")
+            }
+            setConfirmLoading(false);
+            store.product.visibleModal = false;
+        } else {
+            setInitialData({})
+            setConfirmLoading(true);
+            try {
+                await store.product.create(data)
+                message.success("Success Add New Member")
+            } catch (e) {
+                console.log(e, "apa errornya")
+                message.error("Failed Add Member")
+            }
+            setConfirmLoading(false);
+            store.product.visibleModal = false;
+        }
+    }
+
     return (
         <div>
             <Table
                 style={{textAlign: "center"}}
                 columns={columns}
-                dataSource={store.product.data}
+                dataSource={props.data}
                 bordered
             />
+            <PulsaModal visible={store.product.visibleModal}
+                        confirmLoading={confirmLoading}
+                        initialData={initialData}
+                        onCreate={async (data) => {
+                            await onSubmit(data)
+                        }}
+                        onCancel={() => {
+                            setInitialData({})
+                            store.product.visibleModal = false;
+                        }}/>
         </div>
     );
 });
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 45ffbbb..4ba587d 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -1,24 +1,38 @@
-import React, {useState} from "react";
-import {Button, Card, Col, Input, message, Row, Tabs} from "antd";
+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 {Pulsa} from "./Pulsa";
-import {PulsaModal} from "./PulsaModal";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
+import {ProductComponent} from "../../component/ProductComponent";
 
 const {TabPane} = Tabs;
 const {Search} = Input;
 
 export const Product = observer(() => {
-    const [visibleModal, setVisibleModal] = useState(false)
-    const [initialData, setInitialData] = useState({})
-    const [confirmLoading, setConfirmLoading] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const store = useStore();
-    const callback = (key) => {
+
+    useEffect(() => {
+        const init = async () => {
+            try {
+                setIsLoading(true);
+                await store.product.getDataCategories();
+                await store.product.getData();
+                setIsLoading(false);
+            } catch (e) {
+                setIsLoading(false);
+            }
+        };
+
+        init();
+    }, []);
+
+    const handleChangeTabPane = async (key) => {
+        store.product.filterCategory = key;
         console.log(key);
     };
+
     const routeData = [
         {
             route: "/app/home",
@@ -29,32 +43,7 @@ export const Product = observer(() => {
             name: <span style={{fontWeight: 'bold'}}>Product</span>,
         },
     ];
-    const onSubmit = async (data) => {
-        if (initialData.id) {
-            setInitialData({})
-            setConfirmLoading(true);
-            try {
-                await store.product.update(initialData.id, data)
-                message.success("Success Update Data Member")
-            } catch (e) {
-                message.error("Failed Update Data Member")
-            }
-            setConfirmLoading(false);
-            setVisibleModal(false);
-        } else {
-            setInitialData({})
-            setConfirmLoading(true);
-            try {
-                await store.product.create(data)
-                message.success("Success Add New Member")
-            } catch (e) {
-                console.log(e, "apa errornya")
-                message.error("Failed Add Member")
-            }
-            setConfirmLoading(false);
-            setVisibleModal(false);
-        }
-    }
+
     return (
         <div className={["ppob-container"].join(" ")}>
             <BreadcumbComponent data={routeData}/>
@@ -71,44 +60,28 @@ export const Product = observer(() => {
                             placeholder="input search text"
                             style={{width: 200, marginRight: 10}}
                         />
-                        <Button onClick={() => setVisibleModal(true)}>
+                        <Button onClick={() => store.product.visibleModal = true}>
                             <PlusSquareOutlined/> New
                         </Button>
                     </Col>
                 </Row>
                 <Tabs
-                    defaultActiveKey="1"
-                    onChange={callback}
+                    onChange={handleChangeTabPane}
                     size="default"
                     tabBarGutter="50"
                 >
-                    <TabPane tab="Pulsa" key="1">
-                        <Pulsa/>
-                    </TabPane>
-                    <TabPane tab="Game Voucher" key="2">
-                        Game Voucher
-                    </TabPane>
-                    <TabPane tab="Product" key="3">
-                        Product
-                    </TabPane>
-                    <TabPane tab="Prduct" key="4">
-                        Prduct
-                    </TabPane>
-                    <TabPane tab="Prdct" key="5">
-                        Prdct
-                    </TabPane>
+                    {store.product.dataCategories.map((item) => (
+                        <TabPane
+                            tab={item.name}
+                            key={item.id}
+                        >
+                            <ProductComponent
+                                data={store.product.data}
+                            />
+                        </TabPane>
+                    ))}
                 </Tabs>
             </Card>
-            <PulsaModal visible={visibleModal}
-                        confirmLoading={confirmLoading}
-                        initialData={initialData}
-                        onCreate={async (data) => {
-                            onSubmit(data)
-                        }}
-                        onCancel={() => {
-                            setInitialData({})
-                            setVisibleModal(false);
-                        }}/>
         </div>
     );
 });
diff --git a/src/pages/Product/PulsaModal.js b/src/pages/Product/PulsaModal.js
index 0f3db10..f8f5108 100644
--- a/src/pages/Product/PulsaModal.js
+++ b/src/pages/Product/PulsaModal.js
@@ -1,30 +1,50 @@
 import React, {useEffect, useState} from "react";
 import {Form, Input, Modal, Select} from "antd";
 import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
 
-export const PulsaModal = ({visible, onCreate, onCancel}) => {
+export const PulsaModal = observer(({visible, onCreate, onCancel, initialData}) => {
   const [form] = Form.useForm();
   const {Option} = Select;
-  const dataStatus = ["Active", "Inactive"];
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
-  const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const init = async () => {
-    try {
-      setIsLoading(true);
-      await store.categories.getData();
-      setIsLoading(false);
-    } catch (e) {
-      setIsLoading(false);
-    }
-  };
 
   useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        await store.product.getDataSubCategories();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
+
     init();
   }, []);
 
+
+  const subCategoriesOption = [
+    <Option key={123} value={123}>
+      {123}
+    </Option>,
+    <Option key={431} value={123}>
+      {123}
+    </Option>
+  ];
+
+  const subCategoriesOption2 = store.product.dataSubCategories.slice().map(subCategory => {
+    return (
+        <Option key={subCategory.id} value={subCategory.id}>
+          {subCategory.name}
+        </Option>
+    )
+  });
+
+  console.log(store.product.dataSubCategories, 'subCategoriesOption2');
+
   return (
       <Modal
           visible={visible}
@@ -68,7 +88,7 @@ export const PulsaModal = ({visible, onCreate, onCancel}) => {
             <Input/>
           </Form.Item>
           <Form.Item
-              name="markUpPrice"
+              name="base_price"
               label="Mark Up Price"
               rules={[{required: true, message: "Please input mark up price!"}]}
           >
@@ -92,17 +112,24 @@ export const PulsaModal = ({visible, onCreate, onCancel}) => {
             </Select>
           </Form.Item>
           <Form.Item
-              name="subCategoriesId"
-              label="Sub Categories"
-              rules={[{required: true, message: "Please select Sub Category!"}]}
+              name="sub_category"
+              label="Sub categories"
+              rules={[{required: true, message: "Please select sub categories!"}]}
           >
             <Select placeholder="Select Sub Category" allowClear>
-              {store.categories.data.map((it) => {
-                return <Option value={it.id}>{it.name}</Option>;
-              })}
+              {subCategoriesOption2}
             </Select>
           </Form.Item>
+          {/*<Form.Item*/}
+          {/*    name="subCategories"*/}
+          {/*    label="Sub Categories"*/}
+          {/*    rules={[{required: true, message: "Please select Sub Category!"}]}*/}
+          {/*>*/}
+          {/*  <Select placeholder="Select Sub Category" allowClear>*/}
+          {/*    {subCategoriesOption2}*/}
+          {/*  </Select>*/}
+          {/*</Form.Item>*/}
         </Form>
       </Modal>
   );
-};
+});
diff --git a/src/store/categories.js b/src/store/categories.js
deleted file mode 100644
index a74f913..0000000
--- a/src/store/categories.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import {action, makeAutoObservable} from "mobx";
-import {http} from "../utils/http";
-
-export class Categories {
-    page = 0;
-    pageSize = 10
-    data = [];
-    total_data = 0
-
-    constructor(ctx) {
-        this.ctx = ctx;
-        makeAutoObservable(this);
-    }
-
-    @action
-    async getData() {
-        const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`);
-        console.log(response, 'Data cate')
-        console.log(JSON.stringify(response.body.data), 'Data')
-
-        this.data = response.body.data ?? []
-        this.total_data = response.body.total_data ?? 0
-    }
-
-    @action
-    async create(data) {
-        return await http.post('/user').send(data)
-    }
-
-    @action
-    async update(id, data) {
-        return await http.put('/user/' + id).send(data);
-    }
-
-    async delete(id) {
-        return await http.del('/product/' + id);
-    }
-}
-
-
diff --git a/src/store/index.js b/src/store/index.js
index cb89030..a5a0d80 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,7 +3,6 @@ import {Authentication} from "./authentication";
 import {User} from "./user";
 import {Membership} from "./membership";
 import {Product} from "./product";
-import {Categories} from "./categories";
 import {TokenUtil} from "../utils/token";
 
 export class Store {
@@ -12,7 +11,6 @@ export class Store {
     user = new User(this);
     membership = new Membership(this);
     product = new Product(this);
-    categories = new Categories(this);
 
     constructor() {
         TokenUtil.loadToken();
diff --git a/src/store/product.js b/src/store/product.js
index 9b52295..3959731 100644
--- a/src/store/product.js
+++ b/src/store/product.js
@@ -5,33 +5,66 @@ export class Product {
     page = 0;
     pageSize = 10
     data = [];
-    total_data = 0
+    total_data = 0;
+    filterCategory = null;
+
+    pageCategories = 0;
+    pageSizeCategories = 10
+    dataCategories = [];
+    total_dataCategories = 0;
+
+    pageSubCategories = 0;
+    pageSizeSubCategories = 10
+    dataSubCategories = [];
+    total_dataSubCategories = 0;
+
+    visibleModal = false;
 
     constructor(ctx) {
         this.ctx = ctx;
         makeAutoObservable(this);
     }
 
-    @action
     async getData() {
-        const response = await http.get(`/product?page=${this.page}&pageSize=${this.pageSize}`);
+        const response = await http.get(`/product/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`);
 
         this.data = response.body.data ?? []
         this.total_data = response.body.total_data ?? 0
     }
 
-    @action
-    async create(data) {
-        return await http.post('/product').send(data)
+    async getDataSubCategories() {
+        const response = await http.get(`/product/sub-categories?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
+        }
     }
 
     @action
+    async create(data) {
+        const response = await http.post('/product', data);
+        await this.getData();
+        return response;
+    }
+
     async update(id, data) {
-        return await http.put('/user/' + id).send(data);
+        const response = await http.put(`/product/${id}`, data);
+        await this.getData();
+        return response;
     }
 
     async delete(id) {
-        return await http.del('/product/' + id);
+        const response = await http.del(`/product/${id}`);
+        await this.getData();
+        return response;
     }
 }
 
diff --git a/yarn.lock b/yarn.lock
index 172036b..9a5a60e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7784,7 +7784,7 @@ lodash.uniq@^4.5.0:
 
 lodash@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 loglevel@^1.6.8: