diff --git a/src/component/BuyProductModal.js b/src/component/BuyProductModal.js
new file mode 100644
index 0000000..086bb97
--- /dev/null
+++ b/src/component/BuyProductModal.js
@@ -0,0 +1,66 @@
+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/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index 10a3909..22ab026 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -1,7 +1,8 @@
 import React, {useEffect, useState} from "react";
 import {useStore} from "../../utils/useStore";
-import {Button, Card, Col, Input, Modal, Row, Select} from "antd";
+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;
@@ -11,6 +12,7 @@ export const Product = observer(() => {
 
     const [isLoading, setIsLoading] = useState(false);
     const [productData, setProductData] = useState([]);
+    const [data, setData] = useState({});
 
     useEffect(() => {
         const init = async () => {
@@ -45,10 +47,9 @@ export const Product = observer(() => {
         await store.transaction.getData();
     }
 
-    const success = () => {
-        Modal.success({
-            content: 'some messages...some messages...',
-        });
+    const handleBuyProduct = (data) => {
+        setData(data);
+        store.transaction.visibleModalTransaction = true;
     }
 
     return (
@@ -61,10 +62,12 @@ export const Product = observer(() => {
             <Row>
                 <Col span={24}>
                     <Select
-                        placeholder={"Select sub-Category"}
+                        placeholder={"Select Sub Category"}
                         allowClear={true}
                         onChange={(val) => {
-                            handleChangeSubcategory(val);
+                            if (val) {
+                                handleChangeSubcategory(val)
+                            }
                         }}
                         style={{marginBottom: "10px", width: "100%"}}>
                         {store.transaction.dataSubCategories.map((item, index) => (
@@ -89,7 +92,7 @@ export const Product = observer(() => {
             {productData.length != 0 && <Row>
                 {productData.map((item, index) => (
                     <Col key={index} xs={24} md={16} lg={8}>
-                        <Card onClick={success}>
+                        <Card onClick={() => handleBuyProduct(item)} style={{cursor: "pointer"}}>
                             <span style={{color: "black"}}>{item.name}</span>
                             <br/>
                             <span style={{color: "grey", fontSize: 10}}>{item.price}</span>
@@ -102,6 +105,7 @@ export const Product = observer(() => {
                     Beli Sekarang
                 </Button>
             </Col>}
+            <BuyProductModal initialData={data}/>
         </div>
     );
 });
diff --git a/src/store/transaction.js b/src/store/transaction.js
index 2053402..f2c0dc9 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -8,6 +8,7 @@ export class Transaction {
     total_data = 0;
     filterSubCategory = null;
     visibleModalProduct = false;
+    visibleModalTransaction = false;
 
     pageCategories = 0;
     pageSizeCategories = 10
@@ -85,6 +86,15 @@ export class Transaction {
         }
     }
 
+    async buyProduct(data) {
+        try {
+            const response = await http.post('/transaction/order').send(data);
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     async update(id, data) {
         try {
             const response = await http.put(`/product/${id}`).send(data);