Perbaikan PPOB

src/pages/Transaction/Product.js

@@ -160,9 +160,9 @@ export const Product = observer(() => {
               >
                 <Form form={form} layout="vertical">
                   <Form.Item
-                      name="phoneNumber"
-                      label="Phone Number"
-                      rules={[{required: true, message: "Please input Phone Number!"}]}
+                      name="destination"
+                      label="Destination"
+                      rules={[{required: true, message: "Please input Destination Number!"}]}
                   >
                     <Input/>
                   </Form.Item>

src/pages/Transaction/Transaction.js

@@ -1,17 +1,28 @@
-import React, {message, useContext, useEffect} from "react";
-import {useStore} from "../../utils/useStore";
-import {Card, Tabs} from "antd";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {Product} from "./Product";
-import {LINKS} from "../../routes/app";
-import {observer} from "mobx-react-lite";
-import {ModalLoaderContext} from "../../utils/modal";
-
-const {TabPane} = Tabs;
+import React, { message, useContext, useEffect, useState } from "react";
+import { useStore } from "../../utils/useStore";
+import {
+  Card,
+  Tabs,
+  Col,
+  Button,
+  Typography,
+  Select,
+  Modal,
+  Row,
+  DatePicker,
+} from "antd";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { Product } from "./Product";
+import { LINKS } from "../../routes/app";
+import { observer } from "mobx-react-lite";
+import { ModalLoaderContext } from "../../utils/modal";
+import { FilterOutlined } from "@ant-design/icons";
 
+const { TabPane } = Tabs;
 export const Transaction = observer(() => {
   const store = useStore();
-
+  const { Title } = Typography;
+  const { Option } = Select;
   const modalLoader = useContext(ModalLoaderContext);
 
   useEffect(() => {
@@ -50,25 +61,30 @@ export const Transaction = observer(() => {
     },
     {
       route: LINKS.TRANSACTION,
-      name: <span style={{fontWeight: 'bold'}}>Transaksi</span>,
+      name: <span style={{ fontWeight: "bold" }}>Transaksi</span>,
     },
   ];
 
   return (
     <div className={["ppob-container"].join(" ")}>
-      <BreadcumbComponent data={routeData} text=""/>
+      <BreadcumbComponent data={routeData} text="" />
       <Card>
-        <Tabs
-          onChange={handleChangeTabs}
-          size="default"
-          tabBarGutter="50"
-        >
+        <Col span={12} style={{ marginBottom: 30 }}>
+          {/* <Button
+            onClick={() => {
+              store.transaction.visibleModalFilterTransaction = true;
+            }}
+          >
+            <FilterOutlined />
+            Filter
+          </Button> */}
+        </Col>
+        <Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
           {store.transaction.dataCategories.map((item, index) => (
             <TabPane tab={item.name} key={item.id}>
-              <Product/>
+              <Product />
             </TabPane>
           ))}
-
         </Tabs>
       </Card>
     </div>