diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index fb27652..b28fdf3 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -1,11 +1,11 @@
-import React, { useState } from "react";
-import { Button, Form, Input, message, Modal, Space, Table, Tag } from "antd";
-import { observer } from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
-import { useStore } from "../utils/useStore";
-import { LINKS } from "../routes/app";
-import { TopupsaldoModal } from "./TopupsaldoModal";
+import React, {useState} from "react";
+import {Button, Form, Input, message, Modal, Space, Table, Tag} from "antd";
+import {observer} from "mobx-react-lite";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
+import {useHistory} from "react-router-dom";
+import {useStore} from "../utils/useStore";
+import {LINKS} from "../routes/app";
+import {TopupsaldoModal} from "./TopupsaldoModal";
 
 export const SupplierComponent = observer((props) => {
   const store = useStore();
@@ -66,12 +66,10 @@ export const SupplierComponent = observer((props) => {
       key: ["coa", "amount"],
       width: "20%",
       render: (text, record) =>
-        text
-          ? new Intl.NumberFormat("id-ID", {
-              style: "currency",
-              currency: "IDR",
-            }).format(text)
-          : "-",
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text),
     },
     {
       title: "Status",
diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index 39fe5ad..e6ddb4b 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from "react";
-import { useStore } from "../../utils/useStore";
-import { Button, Card, Col, Input, Row, Select, message } from "antd";
-import { observer } from "mobx-react-lite";
-import { BuyProductModal } from "../../component/BuyProductModal";
+import React, {useEffect, useState} from "react";
+import {useStore} from "../../utils/useStore";
+import {Button, Card, Col, Input, Row, Select} from "antd";
+import {observer} from "mobx-react-lite";
+import {BuyProductModal} from "../../component/BuyProductModal";
 
-const { Search } = Input;
-const { Option } = Select;
+const {Search} = Input;
+const {Option} = Select;
 
 export const Product = observer(() => {
   const store = useStore();
@@ -13,8 +13,6 @@ export const Product = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
   const [productData, setProductData] = useState([]);
   const [data, setData] = useState({});
-  const [kode, setKode] = useState({});
-  const [cardIndex, setCardIndex] = useState({});
 
   useEffect(() => {
     const init = async () => {
@@ -41,7 +39,7 @@ export const Product = observer(() => {
   useEffect(() => {
     console.log(
       "⚡ transaction subcategory store",
-      store.transaction.dataSubCategories
+        store.transaction.dataSubCategories
     );
   }, [store.transaction.dataSubCategories]);
 
@@ -51,24 +49,19 @@ export const Product = observer(() => {
     await store.transaction.getData();
   };
 
-  const handleBuyProduct = async (kode) => {
-    console.log(kode);
-    try {
-      await store.product.buyProduct({ productCode: kode });
-      message.success("Success Buy Product");
-    } catch (e) {
-      message.error("Failed Buy Product");
-    }
+  const handleBuyProduct = (data) => {
+    setData(data);
+    store.transaction.visibleModalTransaction = true;
   };
 
   return (
-    <div>
-      <Row>
-        <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+      <div>
+        <Row>
+        <span style={{fontWeight: "bold", marginBottom: "10px"}}>
           Sub Category
         </span>
-      </Row>
-      <Row>
+        </Row>
+        <Row>
         <Col span={24}>
           <Select
             placeholder={"Select Sub Category"}
@@ -107,20 +100,12 @@ export const Product = observer(() => {
           {productData.map((item, index) => (
             <Col key={index} xs={24} md={16} lg={8}>
               <Card
-                onClick={() => {
-                  setKode(item.code);
-                  setCardIndex(index);
-                }}
-                hoverable
-                style={{
-                  cursor: "pointer",
-                  borderColor: cardIndex === index ? "#2D9CDB" : "",
-                  marginLeft: "10px",
-                }}
+                  onClick={() => handleBuyProduct(item)}
+                  style={{cursor: "pointer"}}
               >
-                <span style={{ color: "black" }}>{item.name}</span>
-                <br />
-                <span style={{ color: "grey", fontSize: 10 }}>
+                <span style={{color: "black"}}>{item.name}</span>
+                <br/>
+                <span style={{color: "grey", fontSize: 10}}>
                   {new Intl.NumberFormat("id-ID", {
                     style: "currency",
                     currency: "IDR",
@@ -133,10 +118,7 @@ export const Product = observer(() => {
       )}
       {productData.length !== 0 && (
         <Col style={{ textAlign: "right" }}>
-          <Button
-            style={{ backgroundColor: "#2D9CDB", color: "white" }}
-            onClick={() => handleBuyProduct(kode)}
-          >
+          <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
             Beli Sekarang
           </Button>
         </Col>