diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js
index cb902a5..a1f9567 100644
--- a/src/pages/Transaction/Transaction.js
+++ b/src/pages/Transaction/Transaction.js
@@ -10,6 +10,8 @@ import {
   Modal,
   Row,
   DatePicker,
+  Form,
+  Input,
 } from "antd";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { Product } from "./Product";
@@ -24,12 +26,16 @@ export const Transaction = observer(() => {
   const { Title } = Typography;
   const { Option } = Select;
   const modalLoader = useContext(ModalLoaderContext);
+  const [form] = Form.useForm();
+  const [visibleModalBuy, setVisibleModalBuy] = useState(false);
+  const [barang, setBarang] = useState({});
 
   useEffect(() => {
     const init = async () => {
       try {
         modalLoader.setLoading(true);
         await store.transaction.getDataCategories();
+        await store.transaction.getDataSubCategories();
         modalLoader.setLoading(false);
       } catch (e) {
         modalLoader.setLoading(false);
@@ -44,22 +50,96 @@ export const Transaction = observer(() => {
     init();
   }, []);
 
-  const handleChangeTabs = async (key) => {
+  const routeData = [
+    {
+      route: LINKS.TRANSACTION,
+      name: "Transaksi",
+    },
+  ];
+
+
+  const handleChangeTabs = async (item) => {
     modalLoader.setLoading(true);
     store.transaction.dataSubCategories = [];
     store.transaction.data = [];
     store.transaction.filterSubCategory = null;
-    store.transaction.filterCategory = key;
+    store.transaction.filterCategory = item;
     await store.transaction.getDataSubCategories();
     modalLoader.setLoading(false);
   };
 
-  const routeData = [
-    {
-      route: LINKS.TRANSACTION,
-      name: "Transaksi"
-    },
-  ];
+  const handleChangeSubcategory = async (item) => {
+    store.transaction.filterSubCategory = item;
+    modalLoader.setLoading(true);
+    await store.transaction.getData();
+    modalLoader.setLoading(false);
+  };
+
+
+  const handleBuyProduct = async (data, productCode) => {
+    modalLoader.setLoading(true);
+    try {
+      const response = await store.transaction.buyProd({
+        ...data,
+        productCode: productCode,
+      });
+
+      if (response.status === 201) {
+        message.success(response?.body?.message || "Berhasil Beli Produk");
+      } else {
+        message.error(response?.body?.error || "Gagal Beli Produk", 3);
+      }
+    } catch (e) {
+      console.log("testingan");
+      console.log(e.response, "testingan");
+      console.log(e.result, "testingan1");
+      if (e.response?.body?.error) {
+        message.error(e.response.body.error);
+        setVisibleModalBuy(false);
+        modalLoader.setLoading(false);
+        return;
+      }
+      console.log(e, "apa errornya");
+      message.error("Gagal Beli Product");
+    }
+    setVisibleModalBuy(false);
+    modalLoader.setLoading(false);
+  };
+
+  const handleBuyStag = async (data, productCode) => {
+    modalLoader.setLoading(true);
+    try {
+      const response = await store.transaction.buyProduct({
+        ...data,
+        productCode: productCode,
+      });
+      if (response.status === 201) {
+        message.success(response?.body?.message || "Berhasil Beli Produk");
+      } else {
+        message.error(response?.body?.error || "Gagal Beli Produk", 3);
+      }
+    } catch (e) {
+      console.log("testingan");
+      console.log(e.response, "testingan");
+      console.log(e.result, "testingan1");
+      if (e.response?.body?.error) {
+        message.error(e.response.body.error);
+        setVisibleModalBuy(false);
+        modalLoader.setLoading(false);
+        return;
+      }
+      console.log(e, "apa errornya");
+      message.error("Gagal Beli Product");
+    }
+    // setDataProd(false);
+    // setDataStag(false);
+    setVisibleModalBuy(false);
+    modalLoader.setLoading(false);
+  };
+  const handleCancel = () => {
+    form.resetFields();
+    setVisibleModalBuy(false);
+  };
 
   return (
     <div className={["ppob-container"].join(" ")}>
@@ -75,13 +155,206 @@ export const Transaction = observer(() => {
             Filter
           </Button> */}
         </Col>
-        <Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
-          {store.transaction.dataCategories.map((item, index) => (
-            <TabPane tab={item.name} key={item.id}>
-              <Product />
-            </TabPane>
-          ))}
-        </Tabs>
+        {store.ui.mediaQuery.isDesktop && (
+          <Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
+            {store.transaction.dataCategories.map((item, index) => (
+              <TabPane tab={item.name} key={item.id}>
+                <Product />
+              </TabPane>
+            ))}
+          </Tabs>
+        )}
+
+        {store.ui.mediaQuery.isMobile && (
+          <div>
+            <Row>
+              <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                Kategori
+              </span>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <Select
+                  placeholder={"Select Category"}
+                  allowClear={true}
+                  onChange={(val) => handleChangeTabs(val)}
+                  style={{ marginBottom: "10px", width: "100%" }}
+                >
+                  {store.transaction.dataCategories.map((item, index) => (
+                    <Option key={index} value={item.id}>
+                      {item.name}
+                    </Option>
+                  ))}
+                </Select>
+              </Col>
+            </Row>
+
+            <Row>
+              <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                Sub Category
+              </span>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <Select
+                  placeholder={"Select Sub Category"}
+                  allowClear={true}
+                  onChange={(val) => handleChangeSubcategory(val)}
+                  style={{ marginBottom: "10px", width: "100%" }}
+                  value={store.transaction.filterSubCategory}
+                >
+                  {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>
+            {store.transaction.data.length != 0 && (
+              <Row>
+                {store.transaction.data.map((item, index) => (
+                  <Col key={index} xs={24} md={16} lg={8}>
+                    <Card
+                      onClick={() => {
+                        setVisibleModalBuy(true);
+                        setBarang(item);
+                      }}
+                      hoverable
+                      style={{
+                        cursor: "pointer",
+                        marginLeft: 10,
+                        borderColor: "salmon",
+                        height: 100,
+                        marginBottom: 10,
+                      }}
+                    >
+                      <span style={{ color: "black" }}>
+                        {item?.product_name}
+                      </span>
+                      <br />
+                      <span style={{ color: "grey", fontSize: 10 }}>
+                        {new Intl.NumberFormat("id-ID", {
+                          style: "currency",
+                          currency: "IDR",
+                        }).format(item?.price)}
+                      </span>
+                    </Card>
+                  </Col>
+                ))}
+              </Row>
+            )}
+            <Modal
+              visible={visibleModalBuy}
+              title={`Apakah anda yakin membeli ${barang?.product_name}?`}
+              okText={"Confirm"}
+              onCancel={() => {
+                form.resetFields();
+                setVisibleModalBuy(false);
+              }}
+              // footer={footerLayoutFilter}
+              footer={[
+                <Button
+                  key="back"
+                  style={{
+                    backgroundColor: "#e74e5e",
+                    color: "#fff",
+                  }}
+                  onClick={() => {
+                    form.resetFields();
+                    handleCancel();
+                  }}
+                >
+                  Batal
+                </Button>,
+                <Button
+                  key="Beli"
+                  style={{
+                    backgroundColor: "#4e79e7",
+                    color: "#fff",
+                  }}
+                  onClick={() => {
+                    form
+                      .validateFields()
+                      .then((values) => {
+                        console.log(values, "isi form");
+                        handleBuyProduct(values, barang.product_code);
+                        form.resetFields();
+                      })
+                      .catch((info) => {
+                        console.error("Validate Failed:", info);
+                      });
+                  }}
+                >
+                  Beli
+                </Button>,
+                <Button
+                  key="Beli Stag"
+                  type="primary"
+                  onClick={() => {
+                    form
+                      .validateFields()
+                      .then((values) => {
+                        console.log(values, "isi form");
+                        handleBuyStag(values, barang.product_code);
+                        form.resetFields();
+                      })
+                      .catch((info) => {
+                        console.error("Validate Failed:", info);
+                      });
+                  }}
+                >
+                  Beli Staging
+                </Button>,
+              ]}
+            >
+              <Form form={form} layout="vertical">
+                <Form.Item
+                  name="destination"
+                  label="Nomor Tujuan"
+                  rules={[
+                    {
+                      required: true,
+                      message: "Tolong masukan nomor tujuan!",
+                    },
+                    // {
+                    //   pattern: /^(?:\d*)$/,
+                    //   message: "Value should contain just number",
+                    // },
+                    // {
+                    //   pattern: /^[\d]{1,12}$/,
+                    //   message: "Value should be 1 - 12 character",
+                    // },
+                  ]}
+                >
+                  <Input />
+                </Form.Item>
+              </Form>
+            </Modal>
+          </div>
+        )}
       </Card>
     </div>
   );
diff --git a/src/store/transaction.js b/src/store/transaction.js
index 145b6c8..4c481de 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -23,7 +23,7 @@ export class Transaction {
   pageSizeSubCategories = 10;
   dataSubCategories = [];
   total_dataSubCategories = 0;
-  filterSubCategory = null;
+  //filterSubCategory = null;
 
   pageHistoryTransaction = 0;
   pageSizeHistoryTransaction = 10;