diff --git a/src/pages/11_credit-note/MainPage.vue b/src/pages/11_credit-note/MainPage.vue
index 327c942b..1cea36fe 100644
--- a/src/pages/11_credit-note/MainPage.vue
+++ b/src/pages/11_credit-note/MainPage.vue
@@ -24,6 +24,7 @@ import { pageTabs, columns, hslaColors } from './constants';
 import { CreditNoteStatus, useCreditNote } from 'src/stores/credit-note';
 import TableCreditNote from './TableCreditNote.vue';
 import { dialogWarningClose } from 'src/stores/utils';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -46,6 +47,7 @@ const pageState = reactive({
   total: 0,
 
   creditDialog: false,
+  searchDate: [],
 });
 
 const fieldSelectedOption = computed(() => {
@@ -64,6 +66,8 @@ async function getList(opts?: { page?: number; pageSize?: number }) {
     pageSize: opts?.pageSize || pageSize.value,
     query: pageState.inputSearch === '' ? undefined : pageState.inputSearch,
     creditNoteStatus: pageState.currentTab as CreditNoteStatus | undefined,
+    startDate: pageState.searchDate[0],
+    endDate: pageState.searchDate[1],
   });
 
   if (res) {
@@ -133,6 +137,7 @@ watch(
     () => pageState.inputSearch,
     () => pageSize.value,
     () => pageState.statusFilter,
+    () => pageState.searchDate,
   ],
   () => {
     getList();
@@ -228,6 +233,10 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
+              <template v-slot:append>
+                <q-separator vertical inset class="q-mr-xs" />
+                <AdvanceSearch v-model="pageState.searchDate" />
+              </template>
             </q-input>
 
             <div class="row col-md-5 justify-end" style="white-space: nowrap">
diff --git a/src/pages/12_debit-note/MainPage.vue b/src/pages/12_debit-note/MainPage.vue
index cd022dfa..15e2fc32 100644
--- a/src/pages/12_debit-note/MainPage.vue
+++ b/src/pages/12_debit-note/MainPage.vue
@@ -24,6 +24,7 @@ import { pageTabs, columns, hslaColors } from './constants';
 import { DebitNoteStatus, useDebitNote } from 'src/stores/debit-note';
 import { dialogWarningClose } from 'src/stores/utils';
 import { useQuasar } from 'quasar';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -46,6 +47,7 @@ const pageState = reactive({
   total: 0,
 
   debitDialog: false,
+  searchDate: [],
 });
 
 const fieldSelectedOption = computed(() => {
@@ -68,6 +70,8 @@ async function getList(opts?: { page?: number; pageSize?: number }) {
       ? undefined
       : pageState.currentTab) as DebitNoteStatus,
     includeRegisteredBranch: true,
+    startDate: pageState.searchDate[0],
+    endDate: pageState.searchDate[1],
   });
 
   if (res) {
@@ -149,6 +153,7 @@ watch(
     () => pageState.inputSearch,
     () => pageSize.value,
     () => pageState.statusFilter,
+    () => pageState.searchDate,
   ],
   () => getList(),
 );
@@ -256,6 +261,10 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
+              <template v-slot:append>
+                <q-separator vertical inset class="q-mr-xs" />
+                <AdvanceSearch v-model="pageState.searchDate" />
+              </template>
             </q-input>
 
             <div class="row col-md-5 justify-end" style="white-space: nowrap">
diff --git a/src/pages/13_receipt/MainPage.vue b/src/pages/13_receipt/MainPage.vue
index 8dede01c..3e6083ce 100644
--- a/src/pages/13_receipt/MainPage.vue
+++ b/src/pages/13_receipt/MainPage.vue
@@ -17,7 +17,8 @@ import { columns, hslaColors } from './constants';
 import useFlowStore from 'src/stores/flow';
 import { usePayment, useReceipt } from 'src/stores/payment';
 import { PaymentDataStatus } from 'src/stores/payment/types';
-import { QSelect, useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const $q = useQuasar();
 const navigatorStore = useNavigator();
@@ -26,7 +27,6 @@ const receiptStore = useReceipt();
 const { data, page, pageMax, pageSize } = storeToRefs(receiptStore);
 
 // NOTE: Variable
-const refFilter = ref<InstanceType<typeof QSelect>>();
 
 const pageState = reactive({
   hideStat: false,
@@ -35,6 +35,7 @@ const pageState = reactive({
   fieldSelected: [...columns.map((v) => v.name)],
   gridView: false,
   total: 0,
+  searchDate: [],
 });
 
 const fieldSelectedOption = computed(() => {
@@ -49,6 +50,8 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
     page: page.value,
     pageSize: pageSize.value,
     query: pageState.inputSearch,
+    startDate: pageState.searchDate[0],
+    endDate: pageState.searchDate[1],
   });
   if (ret) {
     data.value = $q.screen.xs ? [...data.value, ...ret.result] : ret.result;
@@ -95,6 +98,7 @@ watch(
     () => pageState.inputSearch,
     () => pageState.statusFilter,
     () => pageSize.value,
+    () => pageState.searchDate,
   ],
   () => {
     page.value = 1;
@@ -172,25 +176,43 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
-              <template v-if="$q.screen.lt.md" v-slot:append>
-                <span class="row">
-                  <q-separator vertical />
-                  <q-btn
-                    icon="mdi-filter-variant"
-                    unelevated
-                    class="q-ml-sm"
-                    padding="4px"
-                    size="sm"
-                    rounded
-                    @click="refFilter?.showPopup"
+              <template v-slot:append>
+                <q-separator vertical inset class="q-mr-xs" />
+                <AdvanceSearch
+                  v-model="pageState.searchDate"
+                  :active="$q.screen.lt.md && pageState.statusFilter !== 'None'"
+                >
+                  <div
+                    v-if="$q.screen.lt.md"
+                    class="q-mt-sm text-weight-medium"
+                  >
+                    {{ $t('general.status') }}
+                  </div>
+                  <q-select
+                    v-if="$q.screen.lt.md"
+                    ref="refFilter"
+                    v-model="pageState.statusFilter"
+                    outlined
+                    dense
+                    option-value="value"
+                    option-label="label"
+                    map-options
+                    emit-value
+                    :for="'field-select-status'"
+                    :options="[
+                      {
+                        label: $t('general.all'),
+                        value: 'None',
+                      },
+                    ]"
                   />
-                </span>
+                </AdvanceSearch>
               </template>
             </q-input>
 
             <div class="row col-md-5" style="white-space: nowrap">
               <q-select
-                v-show="$q.screen.gt.sm"
+                v-if="$q.screen.gt.sm"
                 ref="refFilter"
                 v-model="pageState.statusFilter"
                 outlined
diff --git a/src/stores/credit-note/index.ts b/src/stores/credit-note/index.ts
index e732a204..24da139e 100644
--- a/src/stores/credit-note/index.ts
+++ b/src/stores/credit-note/index.ts
@@ -28,6 +28,8 @@ export async function getCreditNoteList(params?: {
   pageSize?: number;
   query?: string;
   creditNoteStatus?: Status;
+  startDate?: string;
+  endDate?: string;
 }) {
   const res = await api.get<PaginationResult<Data>>(`/${ENDPOINT}`, {
     params,
diff --git a/src/stores/debit-note/index.ts b/src/stores/debit-note/index.ts
index e9a71818..6d8638f8 100644
--- a/src/stores/debit-note/index.ts
+++ b/src/stores/debit-note/index.ts
@@ -28,6 +28,8 @@ export async function getDebitNoteList(params?: {
   query?: string;
   status?: Status;
   includeRegisteredBranch?: boolean;
+  startDate?: string;
+  endDate?: string;
 }) {
   const res = await api.get<PaginationResult<Data>>(`/${ENDPOINT}`, {
     params,
diff --git a/src/stores/payment/index.ts b/src/stores/payment/index.ts
index e1258bdc..960c8a23 100644
--- a/src/stores/payment/index.ts
+++ b/src/stores/payment/index.ts
@@ -101,6 +101,8 @@ export const useReceipt = defineStore('receipt-store', () => {
     debitNoteId?: string;
     debitNoteOnly?: boolean;
     quotationOnly?: boolean;
+    startDate?: string;
+    endDate?: string;
   }) {
     const res = await api.get<PaginationResult<Receipt>>('/receipt', {
       params: opts,