diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index eadaa80..1bc7a67 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
 import {observer} from "mobx-react-lite";
@@ -10,8 +10,6 @@ const {Option} = Select;
 
 export const Product = observer(() => {
   const store = useStore();
-
-  const [productData, setProductData] = useState([]);
   const modalLoader = useContext(ModalLoaderContext);
 
   useEffect(() => {
@@ -36,20 +34,6 @@ export const Product = observer(() => {
     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]);
-
   const handleChangeSubcategory = async (item) => {
     store.transaction.filterSubCategory = item;
     modalLoader.setLoading(true);
@@ -111,47 +95,47 @@ export const Product = observer(() => {
         </Col>
         <Col span={12} style={{textAlign: "right"}}>
           <Search
-            placeholder="input search text"
-            style={{width: 200, marginRight: 10}}
+              placeholder="input search text"
+              style={{width: 200, marginRight: 10}}
           />
         </Col>
       </Row>
-      {productData.length != 0 && (
-        <Row>
-          {productData.map((item, index) => (
-            <Col key={index} xs={24} md={16} lg={8}>
-              <Card
-                onClick={() => {
-                  Modal.confirm({
-                    title: `Are you sure buy ${item.name}?`,
-                    icon: <MoneyCollectOutlined/>,
-                    okText: "Confirm",
-                    cancelText: "Cancel",
-                    okType: "primary",
-                    onOk() {
-                      handleBuyProduct(item.code)
-                    },
-                    onCancel() {
-                      console.log("Cancel");
-                    },
-                  });
-                }}
-                style={{cursor: "pointer"}}
-              >
-                <span style={{color: "black"}}>{item.name}</span>
-                <br/>
-                <span style={{color: "grey", fontSize: 10}}>
+      {store.transaction.data.length != 0 && (
+          <Row>
+            {store.transaction.data.map((item, index) => (
+                <Col key={index} xs={24} md={16} lg={8}>
+                  <Card
+                      onClick={() => {
+                        Modal.confirm({
+                          title: `Are you sure buy ${item.name}?`,
+                          icon: <MoneyCollectOutlined/>,
+                          okText: "Confirm",
+                          cancelText: "Cancel",
+                          okType: "primary",
+                          onOk() {
+                            handleBuyProduct(item.code)
+                          },
+                          onCancel() {
+                            console.log("Cancel");
+                          },
+                        });
+                      }}
+                      style={{cursor: "pointer"}}
+                  >
+                    <span style={{color: "black"}}>{item.name}</span>
+                    <br/>
+                    <span style={{color: "grey", fontSize: 10}}>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
                     currency: "IDR",
                   }).format(item?.currentPrice?.mark_up_price)}
                 </span>
-              </Card>
-            </Col>
-          ))}
-        </Row>
+                  </Card>
+                </Col>
+            ))}
+          </Row>
       )}
-      {productData.length !== 0 && (
+      {store.transaction.data.length !== 0 && (
           <Col style={{textAlign: "right", marginTop: "1em"}}>
             <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
               Beli Sekarang
diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js
index 441a30a..03fa712 100644
--- a/src/pages/Transaction/Transaction.js
+++ b/src/pages/Transaction/Transaction.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState,message} from "react";
+import React, {message, useContext, useEffect} from "react";
 import {useStore} from "../../utils/useStore";
 import {Card, Tabs} from "antd";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@@ -14,7 +14,6 @@ export const Transaction = observer(() => {
 
   const modalLoader = useContext(ModalLoaderContext);
 
-  // Init
   useEffect(() => {
     const init = async () => {
       try {
@@ -34,14 +33,11 @@ export const Transaction = observer(() => {
     init();
   }, []);
 
-  // Category
-  useEffect(() => {
-    console.log('⚡ transaction category store', store.transaction.dataCategories)
-  }, [store.transaction.dataCategories])
-
   const handleChangeTabs = async (key) => {
-    store.transaction.filterCategory = key;
+    store.transaction.dataSubCategories = [];
+    store.transaction.data = [];
     modalLoader.setLoading(true);
+    store.transaction.filterCategory = key;
     await store.transaction.getDataSubCategories();
     modalLoader.setLoading(false);
   };