Config Page

src/pages/Transaction/Product.js

@@ -1,12 +1,12 @@
-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";
-import {MoneyCollectOutlined} from "@ant-design/icons";
-import {ModalLoaderContext} from "../../utils/modal";
+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";
+import { MoneyCollectOutlined } from "@ant-design/icons";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
-const {Option} = Select;
+const { Search } = Input;
+const { Option } = Select;
 
 export const Product = observer(() => {
   const store = useStore();
@@ -18,8 +18,8 @@ export const Product = observer(() => {
         modalLoader.setLoading(true);
         await Promise.allSettled([
           store.transaction.getDataSubCategories(),
-          store.transaction.getDataCategories()
-        ])
+          store.transaction.getDataCategories(),
+        ]);
         modalLoader.setLoading(false);
       } catch (e) {
         modalLoader.setLoading(false);
@@ -44,7 +44,9 @@ export const Product = observer(() => {
   const handleBuyProduct = async (data) => {
     modalLoader.setLoading(true);
     try {
-      const response = await store.transaction.buyProduct({productCode: data});
+      const response = await store.transaction.buyProduct({
+        productCode: data,
+      });
       if (response.status === 201) {
         message.success("Success Buy Product");
       } else {
@@ -64,16 +66,18 @@ export const Product = observer(() => {
   return (
     <div>
       <Row>
-        <span style={{fontWeight: "bold", marginBottom: "10px"}}>Sub Category</span>
+        <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}
+            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}>
@@ -83,54 +87,61 @@ export const Product = observer(() => {
           </Select>
         </Col>
       </Row>
-      <Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
+      <Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
         <Col
           span={12}
-          style={{fontWeight: "bold", display: "flex", alignItems: "center"}}
+          style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
         >
           Produk & Nominal
         </Col>
-        <Col span={12} style={{textAlign: "right"}}>
+        <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>
       {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.product_name}?`,
-                          icon: <MoneyCollectOutlined/>,
-                          okText: "Confirm",
-                          cancelText: "Cancel",
-                          okType: "primary",
-                          onOk() {
-                            handleBuyProduct(item.product_code)
-                          },
-                          onCancel() {
-                            console.log("Cancel");
-                          },
-                        });
-                      }}
-                      style={{cursor: "pointer",marginLeft:10}}
-                  >
-                    <span style={{color: "black"}}>{item.product_name}</span>
-                    <br/>
-                    <span style={{color: "grey", fontSize: 10}}>
+        <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.product_name}?`,
+                    icon: <MoneyCollectOutlined />,
+                    okText: "Confirm",
+                    cancelText: "Cancel",
+                    okType: "primary",
+                    onOk() {
+                      handleBuyProduct(item.product_code);
+                    },
+                    onCancel() {
+                      console.log("Cancel");
+                    },
+                  });
+                }}
+                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>
+              </Card>
+            </Col>
+          ))}
+        </Row>
       )}
       {/* {store.transaction.data.length !== 0 && (
           <Col style={{textAlign: "right", marginTop: "1em"}}>