fixing Bug

src/pages/Membership/MembershipModal.js

@@ -102,8 +102,8 @@ export const MembershipModal = ({
               },
               {
                 //pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
-                pattern: /^[\d]{2,12}$/,
+                pattern: /^[\d]{10,12}$/,
-                message: "Phone number should be less than 12 character",
+                message: "Phone number should be 10 - 12 character",
               },
             ]}
           >

src/pages/Payback/Payback.js

@@ -234,9 +234,9 @@ export const Payback = observer(() => {
   const handleSubmitFilter = async () => {
     const data = form.getFieldsValue();
     //console.log(data);
-    store.transaction.filterMembership = filterMembership;
+    store.payback.filterMembership = filterMembership;
-    store.transaction.filterStart = data.start_date;
+    store.payback.filterStart = data.start_date;
-    store.transaction.filterEnd = data.end_date;
+    store.payback.filterEnd = data.end_date;
     modalLoader.setLoading(true);
     await store.payback.getDataConfirmation();
     modalLoader.setLoading(false);

src/pages/Payback/PaybackCreated.js

@@ -1,8 +1,25 @@
 import React, { useContext, useEffect, useState } from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table, Tag,} from "antd";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Image,
+  Input,
+  List,
+  message,
+  DatePicker,
+  Row,
+  Table,
+  Tag,
+  Typography,
+  Select,
+  Form,
+  Modal,
+} from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
-import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
+import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
 import { PaybackModal } from "./PaybackModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { LINKS } from "../../routes/app";
@@ -13,7 +30,11 @@ import {PAYBACK_STATUS} from "../../constants/payback";
 const { Search } = Input;
 
 export const PaybackCreated = observer(() => {
+  const { Option } = Select;
+  const { Title } = Typography;
+  const [form] = Form.useForm();
   const store = useStore();
+  const [filterMembership, setFilterMembership] = useState([]);
   const [initialData, setInitialData] = useState({});
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -47,7 +68,7 @@ export const PaybackCreated = observer(() => {
       render: (text, record) => (
         <Image
           src={`${appConfig.apiUrl}/config/image/${text}`}
-              style={{width: '5vw'}}
+          style={{ width: "5vw" }}
           alt={record.id}
         />
       ),
@@ -66,14 +87,15 @@ export const PaybackCreated = observer(() => {
       title: "Status",
       dataIndex: "status",
       key: "status",
-      width: '10%',
+      width: "10%",
-      render: (text) =>
+      render: (text) => (
         <Tag
           color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"}
           style={{ color: "#4F566B" }}
         >
           {PAYBACK_STATUS[text]}
         </Tag>
+      ),
     },
   ];
 
@@ -87,6 +109,70 @@ export const PaybackCreated = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Buat Pembayaran</span>,
     },
   ];
+  const handleRemoveFilter = async () => {
+    store.payback.filterStart = null;
+    store.payback.filterEnd = null;
+    form.resetFields();
+    await store.payback.getDataCreated();
+    store.payback.visibleModalFilterCreate = false;
+  };
+
+  const handleCancelFilter = async () => {
+    store.payback.filterStart = null;
+    store.payback.filterEnd = null;
+    store.payback.visibleModalFilterCreate = false;
+    await store.payback.getDataCreated();
+  };
+
+  const handleSubmitFilter = async () => {
+    const data = form.getFieldsValue();
+    //console.log(data);
+    //store.payback.filterMembership = filterMembership;
+    store.payback.filterStart = data.start_date;
+    store.payback.filterEnd = data.end_date;
+    modalLoader.setLoading(true);
+    await store.payback.getDataCreated();
+    modalLoader.setLoading(false);
+    // form.resetFields();
+    // setFilterMembership([]);
+    store.payback.visibleModalFilterCreate = false;
+  };
+
+  // const handleFilterCategory = async (value) => {
+  //   if (value) {
+  //     store.product.filterCategory = value;
+  //     await store.product.getDataSubCategories();
+  //   } else {
+  //     store.product.filterCategory = null;
+  //     await store.product.getDataSubCategories();
+  //   }
+  // };
+
+  const footerLayoutFilter = [
+    <Button
+      key={"remove"}
+      onClick={handleRemoveFilter}
+      style={{
+        backgroundColor: "#e74e5e",
+        color: "#fff",
+      }}
+    >
+      Remove Filter
+    </Button>,
+    <Button key={"cancel"} onClick={handleCancelFilter}>
+      Cancel
+    </Button>,
+    <Button
+      key={"submit"}
+      onClick={handleSubmitFilter}
+      style={{
+        backgroundColor: "#4e79e7",
+        color: "#fff",
+      }}
+    >
+      Apply
+    </Button>,
+  ];
 
   return (
     <div className={["ppob-container"].join(" ")}>
@@ -95,7 +181,11 @@ export const PaybackCreated = observer(() => {
         <div>
           <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
-              <Button>
+              <Button
+                 onClick={() => {
+                   store.payback.visibleModalFilterCreate = true;
+                 }}
+              >
                 <FilterOutlined />
                 Filter
               </Button>
@@ -133,7 +223,7 @@ export const PaybackCreated = observer(() => {
                 total: store.payback.totalDataCreated,
                 current: store.payback.pageCreated + 1,
                 showSizeChanger: true,
-                  simple: false
+                simple: false,
               }}
               onChange={async (page) => {
                 let pageNumber = page.current;
@@ -208,10 +298,40 @@ export const PaybackCreated = observer(() => {
           )}
         </div>
       </Card>
-
+      <Modal
-      <PaybackModal
+        visible={store.payback.visibleModalFilterCreate}
-        initialData={initialData}
+        title={"Filter"}
-      />
+        footer={footerLayoutFilter}
+        onCancel={async() => {
+          //form.resetFields();
+          store.payback.filterStart = null;
+          store.payback.filterEnd = null;
+          store.payback.visibleModalFilterCreate = false;
+          await store.payback.getDataCreated();
+        }}
+      >
+        <Row>
+          <Col span={24}>
+            <Form layout="vertical" name="filter" form={form}>
+              <Form.Item
+                name="start_date"
+                label="Dari"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+              <Form.Item
+                name="end_date"
+                label="Sampai"
+                rules={[{ required: true, message: "Please input Date!" }]}
+              >
+                <DatePicker style={{ width: "100%" }} />
+              </Form.Item>
+            </Form>
+          </Col>
+        </Row>
+      </Modal>
+      <PaybackModal initialData={initialData} />
     </div>
   );
 });

src/store/payback.js

@@ -20,6 +20,9 @@ export class Payback {
     filterMembership=null;
     filterStart=null;
     filterEnd=null;
+
+    //filter created
+    visibleModalFilterCreate=false
   constructor(ctx) {
     this.ctx = ctx;
     makeAutoObservable(this);