diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index 77e3550..752cbe0 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -102,8 +102,8 @@ export const MembershipModal = ({
               },
               {
                 //pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
-                pattern: /^[\d]{2,12}$/,
-                message: "Phone number should be less than 12 character",
+                pattern: /^[\d]{10,12}$/,
+                message: "Phone number should be 10 - 12 character",
               },
             ]}
           >
diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index bdf6545..0f85258 100644
--- a/src/pages/Payback/Payback.js
+++ b/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.transaction.filterStart = data.start_date;
-    store.transaction.filterEnd = data.end_date;
+    store.payback.filterMembership = filterMembership;
+    store.payback.filterStart = data.start_date;
+    store.payback.filterEnd = data.end_date;
     modalLoader.setLoading(true);
     await store.payback.getDataConfirmation();
     modalLoader.setLoading(false);
diff --git a/src/pages/Payback/PaybackCreated.js b/src/pages/Payback/PaybackCreated.js
index 1ba7bbe..c189717 100644
--- a/src/pages/Payback/PaybackCreated.js
+++ b/src/pages/Payback/PaybackCreated.js
@@ -1,19 +1,40 @@
-import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table, Tag,} from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-import {PaybackModal} from "./PaybackModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
-import {ModalLoaderContext} from "../../utils/modal";
-import {appConfig} from "../../config/app";
-import {PAYBACK_STATUS} from "../../constants/payback";
+import React, { useContext, useEffect, useState } from "react";
+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 { PaybackModal } from "./PaybackModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
+import { ModalLoaderContext } from "../../utils/modal";
+import { appConfig } from "../../config/app";
+import { PAYBACK_STATUS } from "../../constants/payback";
 
-const {Search} = Input;
+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);
 
@@ -45,11 +66,11 @@ export const PaybackCreated = observer(() => {
       dataIndex: "image_prove",
       key: "image_prove",
       render: (text, record) => (
-          <Image
-              src={`${appConfig.apiUrl}/config/image/${text}`}
-              style={{width: '5vw'}}
-              alt={record.id}
-          />
+        <Image
+          src={`${appConfig.apiUrl}/config/image/${text}`}
+          style={{ width: "5vw" }}
+          alt={record.id}
+        />
       ),
     },
     {
@@ -57,23 +78,24 @@ export const PaybackCreated = observer(() => {
       dataIndex: "amount",
       key: "amount",
       render: (text) =>
-          new Intl.NumberFormat("id-ID", {
-            style: "currency",
-            currency: "IDR",
-          }).format(text),
+        new Intl.NumberFormat("id-ID", {
+          style: "currency",
+          currency: "IDR",
+        }).format(text),
     },
     {
       title: "Status",
       dataIndex: "status",
       key: "status",
-      width: '10%',
-      render: (text) =>
-          <Tag
-              color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"}
-              style={{color: "#4F566B"}}
-          >
-            {PAYBACK_STATUS[text]}
-          </Tag>
+      width: "10%",
+      render: (text) => (
+        <Tag
+          color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"}
+          style={{ color: "#4F566B" }}
+        >
+          {PAYBACK_STATUS[text]}
+        </Tag>
+      ),
     },
   ];
 
@@ -84,23 +106,91 @@ export const PaybackCreated = observer(() => {
     },
     {
       route: LINKS.PAYBACK_CREATED,
-      name: <span style={{fontWeight: "bold"}}>Buat Pembayaran</span>,
+      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(" ")}>
-      <BreadcumbComponent data={routeData}/>
+      <BreadcumbComponent data={routeData} />
       <Card>
         <div>
-          <Row style={{marginBottom: 20}}>
+          <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
-              <Button>
-                <FilterOutlined/>
+              <Button
+                 onClick={() => {
+                   store.payback.visibleModalFilterCreate = true;
+                 }}
+              >
+                <FilterOutlined />
                 Filter
               </Button>
             </Col>
-            <Col span={12} style={{textAlign: "right"}}>
+            <Col span={12} style={{ textAlign: "right" }}>
               {/* <Search
                 placeholder="input search text"
                 style={{
@@ -116,33 +206,33 @@ export const PaybackCreated = observer(() => {
                     store.payback.visibleModalPayback = true;
                   }}
                 >
-                  <PlusSquareOutlined/> New
+                  <PlusSquareOutlined /> New
                 </Button>
               )}
             </Col>
           </Row>
           {store.ui.mediaQuery.isDesktop && (
             <Table
-                key="1"
-                hasEmpty
-                columns={columns}
-                dataSource={store.payback.dataCreated}
-                bordered
-                pagination={{
-                  pageSize: store.payback.pageSizeCreated,
-                  total: store.payback.totalDataCreated,
-                  current: store.payback.pageCreated + 1,
-                  showSizeChanger: true,
-                  simple: false
-                }}
-                onChange={async (page) => {
-                  let pageNumber = page.current;
-                  store.payback.pageSizeCreated = page.pageSize;
-                  store.payback.pageCreated = pageNumber - 1;
-                  modalLoader.setLoading(true);
-                  await store.payback.getDataCreated();
-                  modalLoader.setLoading(false);
-                }}
+              key="1"
+              hasEmpty
+              columns={columns}
+              dataSource={store.payback.dataCreated}
+              bordered
+              pagination={{
+                pageSize: store.payback.pageSizeCreated,
+                total: store.payback.totalDataCreated,
+                current: store.payback.pageCreated + 1,
+                showSizeChanger: true,
+                simple: false,
+              }}
+              onChange={async (page) => {
+                let pageNumber = page.current;
+                store.payback.pageSizeCreated = page.pageSize;
+                store.payback.pageCreated = pageNumber - 1;
+                modalLoader.setLoading(true);
+                await store.payback.getDataCreated();
+                modalLoader.setLoading(false);
+              }}
             />
           )}
 
@@ -161,10 +251,10 @@ export const PaybackCreated = observer(() => {
                 pageSize: store.payback.pageSizeCreated,
                 total: store.payback.totalDataCreated,
                 current: store.payback.pageCreated + 1,
-                style: {marginBottom: "1rem", marginRight: "1rem"},
+                style: { marginBottom: "1rem", marginRight: "1rem" },
               }}
               dataSource={store.payback.dataCreated}
-              style={{padding: 0}}
+              style={{ padding: 0 }}
               renderItem={(item) => {
                 return (
                   <div>
@@ -185,11 +275,11 @@ export const PaybackCreated = observer(() => {
                         title={item.name}
                         description={
                           <div style={{}}>
-                            <Image src={item.image_prove} preview={false}/>
+                            <Image src={item.image_prove} preview={false} />
                           </div>
                         }
                       />
-                      <div style={{marginRight: 16}}>
+                      <div style={{ marginRight: 16 }}>
                         <p
                           style={{
                             fontSize: 9,
@@ -200,7 +290,7 @@ export const PaybackCreated = observer(() => {
                         </p>
                       </div>
                     </List.Item>
-                    <Divider plain style={{margin: 0}}/>
+                    <Divider plain style={{ margin: 0 }} />
                   </div>
                 );
               }}
@@ -208,10 +298,40 @@ export const PaybackCreated = observer(() => {
           )}
         </div>
       </Card>
-
-      <PaybackModal
-        initialData={initialData}
-      />
+      <Modal
+        visible={store.payback.visibleModalFilterCreate}
+        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>
   );
 });
diff --git a/src/store/payback.js b/src/store/payback.js
index 74b0624..a3399b2 100644
--- a/src/store/payback.js
+++ b/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);