Perbaikan Menu Transaksi

src/pages/Transaction/Product.js

@@ -1,11 +1,11 @@
-import React, {useContext, useEffect, useState} from "react";
-import {useStore} from "../../utils/useStore";
-import {Card, Col, Form, Input, message, Modal, Row, Select} from "antd";
-import {observer} from "mobx-react-lite";
-import {ModalLoaderContext} from "../../utils/modal";
+import React, { useContext, useEffect, useState } from "react";
+import { useStore } from "../../utils/useStore";
+import { Card, Col, Form, Input, message, Modal, Row, Select } from "antd";
+import { observer } from "mobx-react-lite";
+import { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
-const {Option} = Select;
+const { Search } = Input;
+const { Option } = Select;
 
 export const Product = observer(() => {
   const store = useStore();
@@ -72,34 +72,34 @@ export const Product = observer(() => {
   };
 
   return (
-      <div>
-        <Row>
-        <span style={{fontWeight: "bold", marginBottom: "10px"}}>
+    <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) => 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"}}
+      </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" }}>
@@ -115,7 +115,7 @@ export const Product = observer(() => {
             <Col key={index} xs={24} md={16} lg={8}>
               <Card
                 onClick={() => {
-                  setVisibleModalBuy(true)
+                  setVisibleModalBuy(true);
                 }}
                 hoverable
                 style={{
@@ -123,12 +123,12 @@ export const Product = observer(() => {
                   marginLeft: 10,
                   borderColor: "salmon",
                   height: 100,
-                  marginBottom: 10
+                  marginBottom: 10,
                 }}
               >
-                <span style={{color: "black"}}>{item.product_name}</span>
-                <br/>
-                <span style={{color: "grey", fontSize: 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",
@@ -137,34 +137,47 @@ export const Product = observer(() => {
               </Card>
 
               <Modal
-                  visible={visibleModalBuy}
-                  title={`Are you sure buy ${item.product_name}?`}
-                  okText={"Confirm"}
-                  cancelText="Cancel"
-                  onCancel={() => {
-                    form.resetFields();
-                    handleCancel();
-                  }}
-                  onOk={() => {
-                    form
-                        .validateFields()
-                        .then((values) => {
-                          console.log(values, "isi form");
-                          handleBuyProduct(values, item.product_code);
-                          form.resetFields();
-                        })
-                        .catch((info) => {
-                          console.error("Validate Failed:", info);
-                        });
-                  }}
+                visible={visibleModalBuy}
+                title={`Are you sure buy ${item.product_name}?`}
+                okText={"Confirm"}
+                cancelText="Cancel"
+                onCancel={() => {
+                  form.resetFields();
+                  handleCancel();
+                }}
+                onOk={() => {
+                  form
+                    .validateFields()
+                    .then((values) => {
+                      console.log(values, "isi form");
+                      handleBuyProduct(values, item.product_code);
+                      form.resetFields();
+                    })
+                    .catch((info) => {
+                      console.error("Validate Failed:", info);
+                    });
+                }}
               >
                 <Form form={form} layout="vertical">
                   <Form.Item
-                      name="destination"
-                      label="Destination"
-                      rules={[{required: true, message: "Please input Destination Number!"}]}
+                    name="destination"
+                    label="Destination"
+                    rules={[
+                      {
+                        required: true,
+                        message: "Please input Destination Number!",
+                      },
+                      {
+                        pattern: /^(?:\d*)$/,
+                        message: "Value should contain just number",
+                      },
+                      {
+                        pattern: /^[\d]{2,12}$/,
+                        message: "Value should be less than 12 character",
+                      },
+                    ]}
                   >
-                    <Input/>
+                    <Input />
                   </Form.Item>
                 </Form>
               </Modal>