feat: add date range search functionality to invoice management

src/pages/10_invoice/MainPage.vue

@@ -2,7 +2,7 @@
 // NOTE: Library
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
-import { QSelect, useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
 
 // NOTE:  Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -18,13 +18,13 @@ import { columns, hslaColors } from './constants';
 import useFlowStore from 'src/stores/flow';
 import { useInvoice } from 'src/stores/payment';
 import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const $q = useQuasar();
 const navigatorStore = useNavigator();
 const flowStore = useFlowStore();
 const invoiceStore = useInvoice();
 const { data, stats, page, pageMax, pageSize } = storeToRefs(invoiceStore);
-const refFilter = ref<InstanceType<typeof QSelect>>();
 
 // NOTE: Variable
 const pageState = reactive({
@@ -34,6 +34,7 @@ const pageState = reactive({
   fieldSelected: [...columns.map((v) => v.name)],
   gridView: false,
   total: 0,
+  searchDate: [],
 });
 
 const fieldSelectedOption = computed(() => {
@@ -56,6 +57,8 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
           : undefined,
     quotationOnly: true,
     debitNoteOnly: false,
+    startDate: pageState.searchDate[0],
+    endDate: pageState.searchDate[1],
   });
   if (ret) {
     data.value = $q.screen.xs ? [...data.value, ...ret.result] : ret.result;
@@ -89,8 +92,6 @@ function triggerView(opts: { quotationId: string }) {
 }
 
 function viewDocExample(quotationId: string, codeInvoice: string) {
-  console.log(codeInvoice);
-
   localStorage.setItem(
     'quotation-preview',
     JSON.stringify({
@@ -124,6 +125,7 @@ watch(
     () => pageState.inputSearch,
     () => pageState.statusFilter,
     () => pageSize.value,
+    () => pageState.searchDate,
   ],
   () => {
     page.value = 1;
@@ -207,26 +209,50 @@ watch(
               <template #prepend>
                 <q-icon name="mdi-magnify" />
               </template>
-              <template v-if="$q.screen.lt.md" v-slot:append>
+              <template v-slot:append>
-                <span class="row">
+                <q-separator vertical inset class="q-mr-xs" />
-                  <q-separator vertical />
+                <AdvanceSearch
-                  <q-btn
+                  v-model="pageState.searchDate"
-                    icon="mdi-filter-variant"
+                  :active="$q.screen.lt.md && pageState.statusFilter !== 'None'"
-                    unelevated
+                >
-                    class="q-ml-sm"
+                  <div
-                    padding="4px"
+                    v-if="$q.screen.lt.md"
-                    size="sm"
+                    class="q-mt-sm text-weight-medium"
-                    rounded
+                  >
-                    @click="refFilter?.showPopup"
+                    {{ $t('general.status') }}
+                  </div>
+                  <q-select
+                    v-if="$q.screen.lt.md"
+                    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',
+                      },
+                      {
+                        label: $t('invoice.status.PaymentWait'),
+                        value: PaymentDataStatus.Wait,
+                      },
+                      {
+                        label: $t('invoice.status.PaymentSuccess'),
+                        value: PaymentDataStatus.Success,
+                      },
+                    ]"
                   />
-                </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
                 dense

src/stores/payment/index.ts

@@ -162,6 +162,8 @@ export const useInvoice = defineStore('invoice-store', () => {
     debitNoteOnly?: boolean;
     quotationId?: string;
     debitNoteId?: string;
+    startDate?: string;
+    endDate?: string;
   }) {
     const res = await api.get<PaginationResult<Invoice>>('/invoice', {
       params,