diff --git a/src/views/invoice/Paid.jsx b/src/views/invoice/Paid.jsx
index 89461c1..f456ca2 100644
--- a/src/views/invoice/Paid.jsx
+++ b/src/views/invoice/Paid.jsx
@@ -1,121 +1,104 @@
-import { NavLink, useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
-import { observer } from "mobx-react";
-import { toJS } from "mobx";
-import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Image } from "antd";
-import { useStore } from "@/stores/StoreContext.js";
-import * as config from "@/config";
-import { formatDate, isNotEmpty } from "@/utils/commons";
+import { NavLink, useNavigate } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { observer } from 'mobx-react';
+import { toJS } from 'mobx';
+import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Image } from 'antd';
+import { useStore } from '@/stores/StoreContext.js';
+import * as config from '@/config';
+import { formatDate, isNotEmpty } from '@/utils/commons';
 import usePresets from '@/hooks/usePresets';
+import SearchForm from '@/components/SearchForm';
+import useAuthStore from '@/stores/Auth';
+import dayjs from 'dayjs';
 const { Title } = Typography;
 
-function Paid(){
-	const { authStore, invoiceStore } = useStore();
-	const { invoicePaid, search_date_start, search_date_end } = invoiceStore;
-    const [groupNo, onGroupNoChange] = useState("");
-	const navigate = useNavigate();
-    const showTotal = total => `Total ${invoicePaid.length} items`;
+function Paid() {
+  const { invoiceStore } = useStore();
+  const { invoicePaid, search_date_start, search_date_end } = invoiceStore;
+  const [travelAgencyId] = useAuthStore((state) => [state.loginUser.travelAgencyId]);
+  const navigate = useNavigate();
+  const showTotal = (total) => `Total ${total} items`;
 
+  useEffect(() => {
+    invoiceStore.fetchInvoicePaid(travelAgencyId, '', '', '');
+  }, []);
+  const invoicePaidColumns = [
+    {
+      title: 'Payment ref.NO',
+      dataIndex: 'fl_finaceNo',
+      key: 'fl_finaceNo',
+      render: (text, record) => <NavLink to={`/invoice/paid/detail/${record.key}`}>{text}</NavLink>,
+    },
+    {
+      title: 'Payment date',
+      key: 'fl_adddate',
+      dataIndex: 'fl_adddate',
+      render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ''),
+    },
+    {
+      title: 'Number of bills',
+      key: 'fcount',
+      dataIndex: 'fcount',
+    },
+    {
+      title: 'Total amount',
+      key: 'pSum',
+      dataIndex: 'pSum',
+      //render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
+    },
+    {
+      title: 'Bank statement',
+      key: 'fl_pic',
+      dataIndex: 'fl_pic',
+      render: showPIc,
+    },
+  ];
 
-	useEffect (() => {
-		invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId,"","","");
-
-	},[]);
-    const invoicePaidColumns = [
-		{
-			title: "Payment ref.NO",
-			dataIndex: "fl_finaceNo",
-			key: "fl_finaceNo",
-			render: (text, record) => <NavLink to={`/invoice/paid/detail/${record.key}`}>{text}</NavLink>,
-		},
-		{
-			title: "Payment date",
-			key: "fl_adddate",
-			dataIndex: "fl_adddate",
-			render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
-		},
-		{
-			title: "Number of bills",
-			key: "fcount",
-			dataIndex: "fcount",
-		},
-		{
-			title: "Total amount",
-			key: "pSum",
-            dataIndex: "pSum",
-			//render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
-		},
-        {
-			title: "Bank statement",
-			key: "fl_pic",
-            dataIndex: "fl_pic",
-			render: showPIc,
-		},
-	];
-
-    function showPIc(text,record) {
-        let strPic = record.fl_pic;
-        //console.log(JSON.parse(strPic));
-	    if (isNotEmpty(strPic)){
-			return (
-
-				JSON.parse(strPic).map((item,index) => {
-					return <Image key={index} width={90} src={item.url} />;
-				})
-
-       		 );
-		}else{
-			return "";
-		}
-
+  function showPIc(text, record) {
+    let strPic = record.fl_pic;
+    //console.log(JSON.parse(strPic));
+    if (isNotEmpty(strPic)) {
+      return JSON.parse(strPic).map((item, index) => {
+        return <Image key={index} width={90} src={item.url} />;
+      });
+    } else {
+      return '';
     }
+  }
 
-
-
-	return (
-		<Space direction="vertical" style={{ width: "100%" }}>
-			 <Row gutter={16}>
-					<Col span={20}>
-					</Col>
-					<Col span={4}>
-						<Button type="link" onClick={() => navigate("/invoice")}>
-							Back
-						</Button>
-					</Col>
-			</Row>
-			<Title level={3}></Title>
-			<Row gutter={16}>
-				<Col md={24} lg={6} xxl={4}>
-					<Input
-						placeholder="Reference Number"
-						onChange={e => {
-							onGroupNoChange(e.target.value);
-						}}
-					/>
-				</Col>
-				<Col md={24} lg={8} xxl={6}>
-					<Space direction="horizontal">
-						Date
-						<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={false} style={{ width: "100%" }} value={[search_date_start, search_date_end]} presets={usePresets()} onChange={invoiceStore.onDateRangeChange} />
-					</Space>
-				</Col>
-				<Col md={24} lg={4} xxl={4}>
-					<Button
-						type="primary"
-						loading={invoiceStore.loading}
-						onClick={() => invoiceStore.fetchInvoicePaid(authStore.login.travelAgencyId, groupNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT))}>
-						Search
-					</Button>
-				</Col>
-			</Row>
-			<Title level={3}></Title>
-			<Row>
-				<Col md={24} lg={24} xxl={24}>
-					<Table bordered columns={invoicePaidColumns} dataSource={toJS(invoicePaid)} />
-				</Col>
-			</Row>
-		</Space>
-	);
+  return (
+    <Space direction='vertical' style={{ width: '100%' }}>
+      <Row gutter={16}>
+        <Col span={20}>
+          <SearchForm
+            initialValue={{
+              dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
+            }}
+            defaultValue={{
+              shows: ['referenceNo', 'dates'],
+              fieldProps: {
+                referenceNo: { col: 5 },
+                dates: { col: 10, label: 'Date' },
+              },
+            }}
+            onSubmit={(err, formVal, filedsVal) => {
+              invoiceStore.fetchInvoicePaid(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate);
+            }}
+          />
+        </Col>
+        <Col span={4}>
+          <Button type='link' onClick={() => navigate('/invoice')}>
+            Back
+          </Button>
+        </Col>
+      </Row>
+      <Row>
+        <Col md={24} lg={24} xxl={24}>
+          <Table bordered columns={invoicePaidColumns} dataSource={toJS(invoicePaid)} />
+        </Col>
+      </Row>
+    </Space>
+  );
 }
 
 export default observer(Paid);
diff --git a/src/views/invoice/PaidDetail.jsx b/src/views/invoice/PaidDetail.jsx
index eb932da..87ffc26 100644
--- a/src/views/invoice/PaidDetail.jsx
+++ b/src/views/invoice/PaidDetail.jsx
@@ -6,16 +6,19 @@ import { Row, Col, Space, Button, Table,  Typography } from "antd";
 import { useStore } from "@/stores/StoreContext.js";
 import * as config from "@/config";
 import { formatDate, isNotEmpty } from "@/utils/commons";
+import useAuthStore from '@/stores/Auth';
+
 const { Title } = Typography;
 
 function PaidDetail(){
     const navigate = useNavigate();
-    const { authStore, invoiceStore } = useStore();
+    const { invoiceStore } = useStore();
     const { invoicePaidDetail } = invoiceStore;
+    const [travelAgencyId] = useAuthStore((state) => [state.loginUser.travelAgencyId]);
     const { flid } = useParams();
 
     useEffect(() => {
-        invoiceStore.fetchInvoicePaidDetail(authStore.login.travelAgencyId,flid);
+        invoiceStore.fetchInvoicePaidDetail(travelAgencyId,flid);
 
     },[flid]);
 
@@ -64,4 +67,4 @@ function PaidDetail(){
 	);
 }
 
-export default observer(PaidDetail);
\ No newline at end of file
+export default observer(PaidDetail);