diff --git a/src/pages/Transaction/Pulsa.js b/src/pages/Transaction/Pulsa.js
index ded433a..9397be8 100644
--- a/src/pages/Transaction/Pulsa.js
+++ b/src/pages/Transaction/Pulsa.js
@@ -1,25 +1,65 @@
-import React from "react";
-import {Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space,} from "antd";
-import {DownOutlined, TabletOutlined, UserOutlined} from "@ant-design/icons";
+import React, { useEffect, useState } from "react";
+import { useStore } from "../../utils/useStore";
+import { Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space, } from "antd";
+import { DownOutlined, TabletOutlined, UserOutlined } from "@ant-design/icons";
 
 export const Pulsa = () => {
 
-    function handleMenuClick(e) {
-        message.info("Click on menu item.");
-        console.log("click", e);
+    const store = useStore();
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    const [productData, setProductData] = useState([])
+    const [productFilter, setProductFilter] = useState("")
+    // useEffect(()=>{
+    //     if(!productFilter){
+    //         setProductData(store.transaction.data)
+    //     }
+    // },[productFilter])
+
+    useEffect(() => {
+        const init = async () => {
+            try {
+                setIsLoading(true);
+                await store.transaction.getDataSubCategories();
+                await store.transaction.getData();
+                setIsLoading(false);
+            } catch (e) {
+                setIsLoading(false);
+            }
+        };
+
+        init();
+    }, []);
+
+    // data
+    useEffect(() => {
+        console.log('⚡ transaction data store', store.transaction.data)
+        setProductData(store.transaction.data)
+    }, [store.transaction.data])
+
+    // Subcategory
+    useEffect(() => {
+        console.log('⚡ transaction subcategory store', store.transaction.dataSubCategories)
+    }, [store.transaction.dataSubCategories])
+
+
+    function handleMenuClick(item) {
+        message.info("⚡ Click on menu item.");
+        console.log("⚡ click", item);
+        setProductFilter(item.name)
     }
 
     const menu = (
-        <Menu onClick={handleMenuClick}>
-            <Menu.Item key="1" icon={<UserOutlined/>}>
-                1st menu item
-            </Menu.Item>
-            <Menu.Item key="2" icon={<UserOutlined/>}>
-                2nd menu item
-            </Menu.Item>
-            <Menu.Item key="3" icon={<UserOutlined/>}>
-                3rd menu item
-            </Menu.Item>
+        <Menu style={{
+            backgroundColor: 'white'
+        }}>
+            {store.transaction.dataSubCategories.map((item, index) => (
+                <Menu.Item key="1" icon={<UserOutlined />} onClick={() => handleMenuClick(item)} >
+                    {item.name}
+                </Menu.Item>
+            ))}
+
         </Menu>
     );
 
@@ -29,55 +69,12 @@ export const Pulsa = () => {
         });
     }
 
-    const dataCard = [
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-        {
-            title: "DATA AXIS BRONET 2GB-60HR",
-            price: "Harga : Rp.6.000",
-        },
-    ]
-
     return (
         <div>
             <Row>
-        <span style={{fontWeight: "bold", marginBottom: "10px"}}>
-          Sub-Category
-        </span>
+                <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                    Sub-Category
+                </span>
             </Row>
             <Row>
                 <Space wrap>
@@ -88,34 +85,34 @@ export const Pulsa = () => {
                                 color: "grey",
                             }}
                         >
-                            <TabletOutlined/>
+                            <TabletOutlined />
                             Select sub-Category
-                            <DownOutlined/>
+                            <DownOutlined />
                         </Button>
                     </Dropdown>
                 </Space>
             </Row>
             <Row>
-        <span style={{fontWeight: "bold", marginBottom: "10px"}}>
-          Produk & Nominal
-        </span>
+                <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                    Produk & Nominal
+                </span>
             </Row>
             <Row>
-                {dataCard.map((item, index) => (
+                {productData.map((item, index) => (
                     <Col key={index} xs={24} md={16} lg={8}>
                         <Card onClick={success}>
-                            <span style={{color: "black"}}>{item.title}</span>
-                            <br/>
-                            <span style={{color: "grey", fontSize: 10}}>{item.price}</span>
+                            <span style={{ color: "black" }}>{item.name}</span>
+                            <br />
+                            <span style={{ color: "grey", fontSize: 10 }}>{item.price}</span>
                         </Card>
                     </Col>
                 ))}
             </Row>
-            <Col style={{textAlign: "right"}}>
-                <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
+            <Col style={{ textAlign: "right" }}>
+                <Button style={{ backgroundColor: "#2D9CDB", color: "white" }}>
                     Beli Sekarang
                 </Button>
             </Col>
         </div>
-  );
+    );
 };
diff --git a/src/store/index.js b/src/store/index.js
index 8a935c9..899dc04 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,10 +1,11 @@
-import {UI} from "./ui";
-import {Authentication} from "./authentication";
-import {User} from "./user";
-import {Membership} from "./membership";
-import {Product} from "./product";
-import {TokenUtil} from "../utils/token";
-import {Role} from "./role";
+import { UI } from "./ui";
+import { Authentication } from "./authentication";
+import { User } from "./user";
+import { Membership } from "./membership";
+import { Product } from "./product";
+import { Transaction } from "./transaction";
+import { TokenUtil } from "../utils/token";
+import { Role } from "./role";
 
 export class Store {
     ui = new UI(this);
@@ -12,6 +13,7 @@ export class Store {
     user = new User(this);
     membership = new Membership(this);
     product = new Product(this);
+    transaction = new Transaction(this);
     role = new Role(this);
 
     constructor() {
diff --git a/src/store/transaction.js b/src/store/transaction.js
new file mode 100644
index 0000000..8150f40
--- /dev/null
+++ b/src/store/transaction.js
@@ -0,0 +1,69 @@
+import { makeAutoObservable } from "mobx";
+import { http } from "../utils/http";
+
+export class Transaction {
+    page = 0;
+    pageSize = 10
+    data = [];
+    total_data = 0;
+    filterCategory = null;
+    visibleModalProduct = 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/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`);
+
+        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').send(data);
+        await this.getData();
+        return response;
+    }
+
+    async update(id, data) {
+        const response = await http.put(`/product/${id}`).send(data);
+        await this.getData();
+        return response;
+    }
+
+    async delete(id) {
+        const response = await http.del(`/product/${id}`);
+        await this.getData();
+        return response;
+    }
+}
+
+