diff --git a/src/component/BuyProductModal.js b/src/component/BuyProductModal.js
deleted file mode 100644
index 086bb97..0000000
--- a/src/component/BuyProductModal.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-import {Form, Input, message, Modal} from "antd";
-import {observer} from "mobx-react-lite";
-import {useStore} from "../utils/useStore";
-
-export const BuyProductModal = observer(({initialData}) => {
-    const store = useStore();
-    const [form] = Form.useForm();
-
-    const handleCancelBuyProduct = () => {
-        form.resetFields();
-        store.transaction.visibleModalTransaction = false;
-    };
-
-    const handleSubmitBuyProduct = async (data) => {
-        try {
-            const response = await store.transaction.buyProduct({productCode: data});
-            if (response.status === 200) {
-                message.success("Success Buy Product");
-            } else {
-                message.error("Failed Buy Product");
-            }
-        } catch (e) {
-            console.log(e, "apa errornya");
-            message.error("Failed Buy Product");
-        }
-        store.transaction.visibleModalTransaction = false;
-        form.resetFields();
-    };
-
-    return (
-        <div>
-            <Modal
-                visible={store.transaction.visibleModalTransaction}
-                title={`Buy Product ${initialData?.name}`}
-                okText="Buy"
-                cancelText="Cancel"
-                onCancel={handleCancelBuyProduct}
-                onOk={() => {
-                    form
-                        .validateFields()
-                        .then((values) => {
-                            handleSubmitBuyProduct(values);
-                        })
-                        .catch((info) => {
-                            console.error("Validate Failed:", info);
-                        });
-                }}
-            >
-                <Form
-                    form={form}
-                    layout="vertical"
-                    initialValues={{supplier: store.supplier.code}}
-                >
-                    <Form.Item
-                        name="code"
-                        label="Code"
-                        rules={[{required: true, message: "Please input Code!"}]}
-                    >
-                        <Input/>
-                    </Form.Item>
-                </Form>
-            </Modal>
-        </div>
-    );
-});
diff --git a/src/config/app.js b/src/config/app.js
index e4b7ca0..ffdd851 100644
--- a/src/config/app.js
+++ b/src/config/app.js
@@ -1,5 +1,6 @@
 export const appConfig = {
     apiUrl: 'https://ppob-backend.k3s.bangun-kreatif.com/v1'
+    // apiUrl: 'http://localhost:3222/v1'
 };
 
 //export default appConfig;
diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index 39fe5ad..7e7884d 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -1,147 +1,147 @@
-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, message, Modal, Row, Select} from "antd";
+import {observer} from "mobx-react-lite";
+import {MoneyCollectOutlined} from "@ant-design/icons";
 
-const { Search } = Input;
-const { Option } = Select;
+const {Search} = Input;
+const {Option} = Select;
 
 export const Product = observer(() => {
   const store = useStore();
 
   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 () => {
       try {
-        setIsLoading(true);
-        await store.transaction.getDataSubCategories();
-        await store.transaction.getDataCategories();
-        setIsLoading(false);
+          setIsLoading(true);
+          await store.transaction.getDataSubCategories();
+          await store.transaction.getDataCategories();
+          setIsLoading(false);
       } catch (e) {
-        setIsLoading(false);
+          setIsLoading(false);
       }
     };
 
-    init();
+      init();
   }, []);
 
-  // data
-  useEffect(() => {
-    console.log("⚡ transaction data store", store.transaction.data);
-    setProductData(store.transaction.data);
-  }, [store.transaction.data]);
+    // 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]);
+    // Subcategory
+    useEffect(() => {
+        console.log(
+            "⚡ transaction subcategory store",
+            store.transaction.dataSubCategories
+        );
+    }, [store.transaction.dataSubCategories]);
 
-  const handleChangeSubcategory = async (item) => {
-    console.log("item", item);
-    store.transaction.filterSubCategory = item;
-    await store.transaction.getData();
-  };
+    const handleChangeSubcategory = async (item) => {
+        store.transaction.filterSubCategory = item;
+        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 = async (data) => {
+        try {
+            const response = await store.transaction.buyProduct({productCode: data});
+            if (response.status === 200) {
+                message.success("Success Buy Product");
+            } else {
+                message.error("Failed Buy Product");
+            }
+        } catch (e) {
+            console.log(e, "apa errornya");
+            message.error("Failed Buy Product");
+        }
+    };
 
-  return (
-    <div>
-      <Row>
-        <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
-          Sub Category
-        </span>
-      </Row>
-      <Row>
-        <Col span={24}>
-          <Select
-            placeholder={"Select Sub Category"}
-            allowClear={true}
-            onChange={(val) => {
-              if (val) {
-                handleChangeSubcategory(val);
-              }
-            }}
-            style={{ marginBottom: "10px", width: "100%" }}
-          >
-            {store.transaction.dataSubCategories.map((item, index) => (
-              <Option key={item.id} value={item.id}>
-                {item.name}
-              </Option>
-            ))}
-          </Select>
-        </Col>
-      </Row>
-      <Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
-        <Col
-          span={12}
-          style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
-        >
-          Produk & Nominal
-        </Col>
-        <Col span={12} style={{ textAlign: "right" }}>
-          <Search
-            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={() => {
-                  setKode(item.code);
-                  setCardIndex(index);
-                }}
-                hoverable
-                style={{
-                  cursor: "pointer",
-                  borderColor: cardIndex === index ? "#2D9CDB" : "",
-                  marginLeft: "10px",
-                }}
-              >
-                <span style={{ color: "black" }}>{item.name}</span>
-                <br />
-                <span style={{ color: "grey", fontSize: 10 }}>
+    return (
+        <div>
+            <Row>
+                <span style={{fontWeight: "bold", marginBottom: "10px"}}>Sub Category</span>
+            </Row>
+            <Row>
+                <Col span={24}>
+                    <Select
+                        placeholder={"Select Sub Category"}
+                        allowClear={true}
+                        onChange={(val) => {
+                            if (val) {
+                                handleChangeSubcategory(val);
+                            }
+                        }}
+                        style={{marginBottom: "10px", width: "100%"}}
+                    >
+                        {store.transaction.dataSubCategories.map((item, index) => (
+                            <Option key={item.id} value={item.id}>
+                                {item.name}
+                            </Option>
+                        ))}
+                    </Select>
+                </Col>
+            </Row>
+            <Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
+                <Col
+                    span={12}
+                    style={{fontWeight: "bold", display: "flex", alignItems: "center"}}
+                >
+                    Produk & Nominal
+                </Col>
+                <Col span={12} style={{textAlign: "right"}}>
+                    <Search
+                        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}}>
                   {new Intl.NumberFormat("id-ID", {
-                    style: "currency",
-                    currency: "IDR",
+                      style: "currency",
+                      currency: "IDR",
                   }).format(item?.currentPrice?.mark_up_price)}
                 </span>
-              </Card>
-            </Col>
-          ))}
+                            </Card>
+                        </Col>
+                    ))}
         </Row>
       )}
       {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>
       )}
-      <BuyProductModal initialData={data} />
     </div>
   );
 });