feat: add date range selection to credit note, debit note, and receipt management

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