diff --git a/src/stores/Products/Index.js b/src/stores/Products/Index.js
index 3d727be..365ea7a 100644
--- a/src/stores/Products/Index.js
+++ b/src/stores/Products/Index.js
@@ -30,7 +30,7 @@ export const copyAgencyDataAction = async (postbody) => {
 };
 
 export const getAgencyProductsAction = async (param) => {
-  const _param = { ...param, use_year: String(param.use_year || '').replace('all', ''), audit_state: (param.audit_state || '').replace('all', '') };
+  const _param = { ...param, use_year: String(param.use_year || '').replace('all', ''), audit_state: String(param.audit_state || '').replace('all', '') };
   const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/travel_agency_products`, _param);
   return errcode !== 0 ? { agency: {}, products: [] } : result;
 };
diff --git a/src/views/products/Audit.jsx b/src/views/products/Audit.jsx
index dc35d85..35fd4e3 100644
--- a/src/views/products/Audit.jsx
+++ b/src/views/products/Audit.jsx
@@ -12,11 +12,13 @@ import RequireAuth from '@/components/RequireAuth';
 import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
 import dayjs from 'dayjs';
 import VendorSelector from '@/components/VendorSelector';
+import AuditStateSelector from '@/components/AuditStateSelector';
 const Header = ({ refresh, ...props }) => {
   const { travel_agency_id, use_year, audit_state  } = useParams();
   const { t } = useTranslation();
   const isPermitted = useAuthStore(state => state.isPermitted);
   const [activeAgency, setActiveAgency] = useProductsStore((state) => [state.activeAgency, state.setActiveAgency]);
+  const stateMapVal = useProductsAuditStatesMapVal();
   const { message, notification } = App.useApp();
   const navigate = useNavigate();
 
@@ -29,6 +31,8 @@ const Header = ({ refresh, ...props }) => {
 
   const [param, setParam] = useState({ pick_year: baseYear, pick_agency: travel_agency_id, });
   const [pickYear, setPickYear] = useState(baseYear);
+  const [pickAgency, setPickAgency] = useState({value: activeAgency.travel_agency_id, label: activeAgency.travel_agency_name });
+  const [pickAuditState, setPickAuditState] = useState();
   useEffect(() => {
     refresh(param);
     navigate(`/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/audit`);
@@ -36,12 +40,28 @@ const Header = ({ refresh, ...props }) => {
     return () => {};
   }, [param]);
 
+  const emptyPickState = { value: '', label: t('products:State') };
+  useEffect(() => {
+    const baseState = audit_state === 'all' ? emptyPickState : stateMapVal[`${audit_state}`];
+    if (isEmpty(pickAuditState)) {
+      setPickAuditState(baseState);
+    }
+    return () => {};
+  }, [audit_state, stateMapVal])
+
+
   const handleYearChange = (value) => {
     setPickYear(value);
     setParam((pre) => ({ ...pre, ...{ pick_year: value } }));
   };
+  const handleAuditStateChange = (labelValue) => {
+    const { value } = labelValue || emptyPickState;
+    setPickAuditState(labelValue || emptyPickState);
+    setParam((pre) => ({ ...pre, ...{ pick_state: value } }));
+  };
 
   const handleAgencyChange = ({ label, value }) => {
+    setPickAgency({ label, value });
     setActiveAgency({ travel_agency_id: value, travel_agency_name: label });
     setParam((pre) => ({ ...pre, ...{ pick_agency: value } }));
   };
@@ -71,8 +91,9 @@ const Header = ({ refresh, ...props }) => {
         <h2 className='m-0 leading-tight'>
           {isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? (
             <VendorSelector
-              value={{ label: activeAgency.travel_agency_name, value: activeAgency.travel_agency_id }}
+              value={pickAgency}
               onChange={handleAgencyChange}
+              allowClear={false}
               mode={null}
               className='w-72'
               size='large'
@@ -83,6 +104,8 @@ const Header = ({ refresh, ...props }) => {
           )}
           <Divider type={'vertical'} />
           <Select options={yearOptions} variant={'borderless'} className='w-24' size='large' value={pickYear} onChange={handleYearChange} />
+          <Divider type={'vertical'} />
+          <AuditStateSelector variant={'borderless'} className='w-32' size='large' value={pickAuditState} onChange={handleAuditStateChange} />
           {/* <Divider type={'vertical'} />
            {(use_year || '').replace('all', '')} */}
         </h2>
@@ -266,15 +289,16 @@ const Audit = ({ ...props }) => {
   const { travel_agency_id, use_year, audit_state } = useParams();
   const [loading, activeAgency, getAgencyProducts] = useProductsStore((state) => [state.loading, state.activeAgency, state.getAgencyProducts]);
 
-  const handleGetAgencyProducts = ({pick_year, pick_agency}={}) => {
+  const handleGetAgencyProducts = ({pick_year, pick_agency, pick_state}={}) => {
     const year = pick_year || use_year;
     const agency = pick_agency || travel_agency_id;
-    getAgencyProducts({ travel_agency_id: agency, use_year: year, audit_state });
+    const state = pick_state ?? audit_state;
+    getAgencyProducts({ travel_agency_id: agency, use_year: year, audit_state: state });
   };
 
   return (
     <>
-      <SecondHeaderWrapper header={<Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} />} loading={loading} backTo={`/products`}>
+      <SecondHeaderWrapper loading={loading} backTo={`/products`} header={<Header title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} />}>
         {/* <PrintContractPDF /> */}
 
         <TypesPanels refresh={handleGetAgencyProducts} />
diff --git a/src/views/products/Detail/CopyProducts.jsx b/src/views/products/Detail/CopyProducts.jsx
index af2ed57..641937d 100644
--- a/src/views/products/Detail/CopyProducts.jsx
+++ b/src/views/products/Detail/CopyProducts.jsx
@@ -3,10 +3,9 @@ import { App, Form, Modal, DatePicker, Divider, Switch } from 'antd';
 import { isEmpty, objectMapper } from '@/utils/commons';
 import { useTranslation } from 'react-i18next';
 
-import SearchInput from '@/components/SearchInput';
 import DeptSelector from '@/components/DeptSelector';
 import ProductsTypesSelector from '@/components/ProductsTypesSelector';
-import { fetchVendorList } from '@/components/VendorSelector';
+import VendorSelector from '@/components/VendorSelector';
 import dayjs from 'dayjs';
 import arraySupport from 'dayjs/plugin/arraySupport';
 import { copyAgencyDataAction } from '@/stores/Products/Index';
@@ -31,13 +30,7 @@ export const CopyProductsForm = ({ action, initialValues, onFormInstanceReady, s
   return (
     <Form layout='horizontal' form={form} name='form_in_modal' initialValues={initialValues} onValuesChange={onValuesChange} >
       {action === '#' && <Form.Item name='agency' label={`${t('products:CopyFormMsg.target')}${t('products:Vendor')}`} rules={[{ required: true, message: t('products:CopyFormMsg.requiredVendor') }]}>
-        <SearchInput
-          placeholder={t('products:Vendor')}
-          mode={null}
-          maxTagCount={0}
-          fetchOptions={fetchVendorList}
-          map={{ travel_agency_name: 'label', travel_agency_id: 'value' }}
-        />
+        <VendorSelector mode={null} placeholder={t('products:Vendor')} />
       </Form.Item>}
       <Form.Item name={`products_types`} label={t('products:ProductType')} >
         <ProductsTypesSelector maxTagCount={1} mode={'multiple'} placeholder={t('All')} />