diff --git a/src/stores/Invoice.js b/src/stores/Invoice.js
index 52e4984..95cab3e 100644
--- a/src/stores/Invoice.js
+++ b/src/stores/Invoice.js
@@ -8,7 +8,7 @@ import dayjs from "dayjs";
 
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
-
+import useAuthStore from '@/stores/Auth';
 
 const initialState = {
   invoiceList: [], //账单列表
@@ -124,7 +124,7 @@ export class Invoice {
 
 	fetchInvoiceDetail(GMDSN, GSN) {
 		const fetchUrl = prepareUrl(HT_HOST + "/service-cusservice/PTGetZDDetail")
-			.append("VEI_SN", this.root.authStore.login.travelAgencyId)
+			.append("VEI_SN", useAuthStore.getState().loginUser.travelAgencyId)
 			.append("GRI_SN", GSN)
 			.append("GMD_SN", GMDSN)
 			.append("LGC", 1)
@@ -231,7 +231,7 @@ export class Invoice {
 	postEditInvoiceDetail(GMD_SN, Currency, Cost, PayDate, Pic, Memo) {
 		let postUrl = HT_HOST + "/service-cusservice/EditSupplierFK";
 		let formData = new FormData();
-		formData.append("LMI_SN", this.root.authStore.login.userId);
+		formData.append("LMI_SN", useAuthStore.getState().loginUser.userId);
 		formData.append("GMD_SN", GMD_SN);
 		formData.append("Currency", Currency);
 		formData.append("Cost", Cost);
@@ -249,8 +249,8 @@ export class Invoice {
 	postAddInvoice(GRI_SN, Currency, Cost, PayDate, Pic, Memo) {
 		let postUrl = HT_HOST + "/service-cusservice/AddSupplierFK";
 		let formData = new FormData();
-		formData.append("LMI_SN", this.root.authStore.login.userId);
-		formData.append("VEI_SN", this.root.authStore.login.travelAgencyId);
+		formData.append("LMI_SN", useAuthStore.getState().loginUser.userId);
+		formData.append("VEI_SN", useAuthStore.getState().loginUser.travelAgencyId);
 		formData.append("GRI_SN", GRI_SN);
 		formData.append("Currency", Currency);
 		formData.append("Cost", Cost);
diff --git a/src/views/invoice/Detail.jsx b/src/views/invoice/Detail.jsx
index cd1e539..01a91a2 100644
--- a/src/views/invoice/Detail.jsx
+++ b/src/views/invoice/Detail.jsx
@@ -8,6 +8,7 @@ import { PlusOutlined, AuditOutlined, SmileOutlined, SolutionOutlined, EditOutli
 import { isNotEmpty } from "@/utils/commons";
 import * as config from "@/config";
 import dayjs from "dayjs";
+import useAuthStore from '@/stores/Auth';
 
 const { Title,Text } = Typography;
 const { TextArea } = Input;
@@ -15,7 +16,10 @@ const { TextArea } = Input;
 function Detail() {
 	const navigate = useNavigate();
 	const { GMDSN, GSN } = useParams();
-	const { invoiceStore, authStore } = useStore();
+	const { invoiceStore, } = useStore();
+
+  const [travelAgencyId, token] = useAuthStore((state) => [state.loginUser.travelAgencyId, state.loginUser.token]);
+
 	const { invoicekImages, invoiceGroupInfo, invoiceProductList, invoiceCurrencyList, invoiceZDDetail } = invoiceStore;
 	const [form] = Form.useForm();
 	const [dataLoading, setDataLoading] = useState(false);
@@ -35,7 +39,7 @@ function Detail() {
 		invoiceStore
 			.fetchInvoiceDetail(GMDSN, GSN)
 			.then(json => {
-				let ZDDetail = json.ZDDetail;			
+				let ZDDetail = json.ZDDetail;
 				if (isNotEmpty(ZDDetail)) {
 					let arrLen = ZDDetail.length;
 					const formData = ZDDetail.map((data, index) => {
@@ -122,7 +126,7 @@ function Detail() {
 						description: "Success Submit!",
 						placement: "top",
 						duration: 4,
-					});										
+					});
 				}
 			});
 		}
@@ -272,13 +276,13 @@ function Detail() {
 														},
 													]}
 												>
-													<DatePicker picker="month" />													
-												</Form.Item>												
-												<Text type="secondary">Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the travel advisor. </Text>												
+													<DatePicker picker="month" />
+												</Form.Item>
+												<Text type="secondary">Payment is arranged during the last week of each month. If the invoice is issued after the 20th, please select the following month for payment. For urgent payments, please contact the travel advisor. </Text>
 												<Form.Item name="info_gmdsn" hidden={true}>
 													<input />
 												</Form.Item>
-												<br/>	
+												<br/>
 												<Form.Item>
 													<Button type="primary" htmlType="submit">
 														Submit
@@ -290,7 +294,7 @@ function Detail() {
 													<Upload
 														name="ghhfile"
 														multiple={true}
-														action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${authStore.login.travelAgencyId}&FilePathName=invoice&token=${authStore.login.token}`}
+														action={config.HT_HOST + `/service-fileServer/FileUpload?GRI_SN=${GSN}&VEI_SN=${travelAgencyId}&FilePathName=invoice&token=${token}`}
 														fileList={fileList}
 														listType="picture-card"
 														onChange={handleChange}
diff --git a/src/views/invoice/Index.jsx b/src/views/invoice/Index.jsx
index 0b8b29a..a90b5d4 100644
--- a/src/views/invoice/Index.jsx
+++ b/src/views/invoice/Index.jsx
@@ -7,13 +7,19 @@ import { useStore } from "@/stores/StoreContext.js";
 import * as config from "@/config";
 import { formatDate, isNotEmpty } from "@/utils/commons";
 import { AuditOutlined, SmileOutlined, SolutionOutlined, EditOutlined } from "@ant-design/icons";
+import useAuthStore from '@/stores/Auth';
 import usePresets from '@/hooks/usePresets';
+import SearchForm from '@/components/SearchForm';
+import dayjs from 'dayjs';
 
 const { Title } = Typography;
 
 function Index() {
 	const { authStore, invoiceStore } = useStore();
 	const { invoiceList, search_date_start, search_date_end } = invoiceStore;
+
+  const [travelAgencyId ] = useAuthStore((state) => [state.loginUser.travelAgencyId]);
+
 	const [groupNo, onGroupNoChange] = useState("");
 	const [OrderType, onOrderTypeChange] = useState(0); //订单状态搜索
 	const navigate = useNavigate();
@@ -76,76 +82,36 @@ function Index() {
 
 	return (
 		<Space direction="vertical" style={{ width: "100%" }}>
-			<Title level={3}></Title>
-			<Row gutter={16}>
-				<Col md={24} lg={4} xxl={4}>
-					<Input
-						placeholder="Reference Number"
-						onChange={e => {
-							onGroupNoChange(e.target.value);
-						}}
-					/>
-				</Col>
-				<Col md={24} lg={4} xxl={3}>
+    <Row gutter={16}>
+    <Col flex="auto">
+  <SearchForm
+    initialValue={{
+      dates: [dayjs().subtract(2, 'M').startOf('M'), dayjs().endOf('M')],
+    }}
+    defaultValue={{
+      shows: ['referenceNo', 'invoiceStatus', 'dates'],
+      fieldProps: {
+        referenceNo: { col: 5},
+        invoiceStatus: { col: 4},
+        dates: { col: 10 },
+      },
+    }}
+    onSubmit={(err, formVal, filedsVal) => {
+      // fetchInvoiceList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate, formVal.invoiceStatus);
+      invoiceStore.fetchInvoiceList(travelAgencyId, formVal.referenceNo, formVal.startdate, formVal.enddate, formVal.invoiceStatus)
+    }}
+    />
+    </Col>
+    <Col md={24} lg={4} xxl={4}>
+      <Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/338787`)}>
+        Misc. Invoice
+      </Button>
+      <Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/paid`)}>
+        Bank statement
+      </Button>
+    </Col>
+    </Row>
 
-					<Select
-					defaultValue="Status"
-					style={{
-						width: 220,
-					}}
-					onChange={ value => {onOrderTypeChange(value);}}
-					options={[
-						{
-						value: '0',
-						label: 'Status',
-						},
-						{
-						value: '1',
-						label: 'Not submitted',
-						},
-						{
-						value: '2',
-						label: 'Submitted',
-						},
-						{
-						value: '3',
-						label: 'Travel advisor approved',
-						},
-						{
-						value: '4',
-						label: 'Finance Dept arrproved',
-						},
-						{
-							value: '5',
-							label: 'Paid',
-						},
-					]}
-					/>
-				</Col>
-				<Col md={24} lg={8} xxl={6}>
-					<Space direction="horizontal">
-						Arrival Date
-						<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={true} style={{ width: "100%" }} defaultValue={[search_date_start, search_date_end]} presets={usePresets()} onChange={invoiceStore.onDateRangeChange} allowEmpty={true} />
-					</Space>
-				</Col>
-				<Col md={24} lg={4} xxl={4}>
-					<Button
-						type="primary"
-						loading={invoiceStore.loading}
-						onClick={() => invoiceStore.fetchInvoiceList(authStore.login.travelAgencyId, groupNo, search_date_start==null?null:search_date_start.format(config.DATE_FORMAT), search_date_end==null?null:search_date_end.format(config.DATE_FORMAT),OrderType)}>
-						Search
-					</Button>
-				</Col>
-				<Col md={24} lg={4} xxl={4}>
-					<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/338787`)}>
-						Misc. Invoice
-					</Button>
-					<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/paid`)}>
-						Bank statement
-					</Button>
-					</Col>
-			</Row>
-			<Title level={3}></Title>
 			<Row>
 				<Col md={24} lg={24} xxl={24}>
 					<Table bordered pagination={{ defaultPageSize: 20, showTotal: showTotal }} columns={invoiceListColumns} dataSource={toJS(invoiceList)} />