Perbaikan Modal

src/pages/Membership/Membership.js

@@ -507,6 +507,7 @@ export const Membership = observer(() => {
         title={"Filter"}
         footer={footerLayoutFilter}
         onCancel={() => {
+          form.resetFields();
           store.membership.visibleModalFilterMembership = false;
         }}
       >

src/pages/Payback/Payback.js

@@ -16,6 +16,7 @@ import {
   Select,
   Typography,
   DatePicker,
+  Form,
 } from "antd";
 import { useStore } from "../../utils/useStore";
 import { observer } from "mobx-react-lite";
@@ -38,15 +39,17 @@ const { RangePicker } = DatePicker;
 export const Payback = observer(() => {
   const { Option } = Select;
   const { Title } = Typography;
+  const [form] = Form.useForm();
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
-  const [filterSupplier, setFilterSupplier] = useState([]);
+  const [filterMembership, setFilterMembership] = useState([]);
   const [filterSubCategories, setFilterSubCategories] = useState([]);
 
   useEffect(() => {
     const init = async () => {
       try {
         modalLoader.setLoading(true);
+        await store.membership.getData();
         await store.payback.getDataConfirmation();
         modalLoader.setLoading(false);
       } catch (e) {
@@ -209,29 +212,36 @@ export const Payback = observer(() => {
   };
 
   const handleRemoveFilter = async () => {
-    store.product.filterSupplier = null;
-    store.product.filterSubCategory = null;
-    setFilterSupplier([]);
-    store.product.filterCategory = null;
-    setFilterSubCategories([]);
-    await store.product.getData();
-    store.product.visibleModalFilterProduct = false;
+    store.payback.filterMembership = null;
+    store.payback.filterStart = null;
+    store.payback.filterEnd = null;
+    setFilterMembership([]);
+    form.resetFields();
+    await store.payback.getDataConfirmation();
+    store.payback.visibleModalFilterPayback = false;
   };
 
   const handleCancelFilter = () => {
-    setFilterSupplier([]);
-    store.product.filterCategory = null;
-    setFilterSubCategories([]);
+    setFilterMembership([]);
+    form.resetFields();
+    store.payback.filterMembership = null;
+    store.payback.filterStart = null;
+    store.payback.filterEnd = null;
     store.payback.visibleModalFilterPayback = false;
   };
 
   const handleSubmitFilter = async () => {
-    store.product.filterSupplier = filterSupplier;
-    store.product.filterSubCategory = filterSubCategories;
+    const data = form.getFieldsValue();
+    //console.log(data);
+    store.transaction.filterMembership = filterMembership;
+    store.transaction.filterStart = data.start_date;
+    store.transaction.filterEnd = data.end_date;
     modalLoader.setLoading(true);
-    await store.product.getData();
+    await store.payback.getDataConfirmation();
     modalLoader.setLoading(false);
-    store.product.visibleModalFilterProduct = false;
+    form.resetFields();
+    setFilterMembership([]);
+    store.payback.visibleModalFilterPayback = false;
   };
 
   const handleFilterCategory = async (value) => {
@@ -462,34 +472,56 @@ export const Payback = observer(() => {
         visible={store.payback.visibleModalFilterPayback}
         title={"Filter"}
         footer={footerLayoutFilter}
+        onCancel={() => {
+          form.resetFields();
+          setFilterMembership([]);
+          store.payback.visibleModalFilterPayback = false;
+        }}
       >
         <Row>
           <Col span={24}>
             <Title level={5} type={"secondary"} strong>
               From
             </Title>
-            <Select
-              mode={"multiple"}
-              placeholder="Pilih Anggota"
-              onChange={(val) => {
-                setFilterSupplier(val);
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
-              value={filterSupplier}
-            >
-              {store.payback.dataConfirmation.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.userData_name}
-                </Option>
-              ))}
-            </Select>
+            <Form layout="vertical" name="filter" form={form}>
+              <Select
+                mode={"multiple"}
+                placeholder="Pilih Anggota"
+                onChange={(val) => {
+                  setFilterMembership(val);
+                }}
+                style={{ marginBottom: "20px", width: "100%" }}
+                value={filterMembership}
+              >
+                {store.membership.data.map((item) => (
+                  <Option value={item.id} key={item.id}>
+                    {item.name}
+                  </Option>
+                ))}
+              </Select>
+              <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>
-          <Col span={24}>
-            <Title level={5} type={"secondary"} strong>
+          {/* <Col span={24}> */}
+
+          {/* <Title level={5} type={"secondary"} strong>
               Date
             </Title>
-            <RangePicker style={{ marginBottom: "20px", width: "100%" }} />
-            {/* <Select
+            <RangePicker style={{ marginBottom: "20px", width: "100%" }} /> */}
+          {/* <Select
               mode={"multiple"}
               placeholder="Choose Category"
               onChange={async (val) => handleFilterCategory(val)}
@@ -502,7 +534,7 @@ export const Payback = observer(() => {
                 </Option>
               ))}
             </Select> */}
-          </Col>
+          {/* </Col> */}
           {/* <Col span={24}>
             <Title level={5} type={"secondary"} strong>
               Filter Sub-Categories

src/pages/Profile/Profile.js

@@ -74,6 +74,7 @@ export const Profile = observer(() => {
     modalLoader.setLoading(true);
     await store.transaction.getDataHistoryTransaction();
     modalLoader.setLoading(false);
+    form.resetFields();
     store.transaction.visibleModalFilterTransaction = false;
   };