feat: implement date range filtering in branch management

src/pages/01_branch-management/MainPage.vue

@@ -6,7 +6,7 @@ import { Icon } from '@iconify/vue';
 import { BranchContact } from 'stores/branch-contact/types';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import type { QSelect, QTableProps, QTableSlots } from 'quasar';
+import type { QTableProps, QTableSlots } from 'quasar';
 import { resetScrollBar } from 'src/stores/utils';
 import useBranchStore from 'stores/branch';
 import useFlowStore from 'stores/flow';
@@ -52,6 +52,7 @@ import {
   UndoButton,
 } from 'components/button';
 import { useNavigator } from 'src/stores/navigator';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -72,7 +73,6 @@ const typeBranchItem = [
     color: 'var(--blue-6-hsl)',
   },
 ];
-const refFilter = ref<InstanceType<typeof QSelect>>();
 const holdDialog = ref(false);
 const isSubCreate = ref(false);
 const columns = [
@@ -175,6 +175,8 @@ const qrCodeDialog = ref(false);
 const qrCodeimageUrl = ref<string>('');
 const formLastSubBranch = ref<number>(0);
 
+const searchDate = ref<string[]>([]);
+
 const branchStore = useBranchStore();
 const flowStore = useFlowStore();
 const { locale } = useI18n();
@@ -715,12 +717,20 @@ async function fetchList(opts: {
   tree?: boolean;
   withHead?: boolean;
   filter?: 'head' | 'sub';
+  startDate?: string;
+  endDate?: string;
 }) {
   await branchStore.fetchList(opts);
 }
 
-watch(inputSearch, () => {
-  fetchList({ tree: true, query: inputSearch.value, withHead: true });
+watch([inputSearch, searchDate], () => {
+  fetchList({
+    tree: true,
+    query: inputSearch.value,
+    withHead: true,
+    startDate: searchDate.value[0],
+    endDate: searchDate.value[1],
+  });
   currentSubBranch.value = undefined;
 });
 
@@ -1170,26 +1180,49 @@ watch(currentHq, () => {
                     <template v-slot: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="searchDate"
+                        :active="$q.screen.lt.md && statusFilter !== 'all'"
+                      >
+                        <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"
+                          v-model="statusFilter"
+                          outlined
+                          dense
+                          autocomplete="off"
+                          option-value="value"
+                          option-label="label"
+                          map-options
+                          emit-value
+                          :for="'field-select-status'"
+                          :options="[
+                            { label: $t('general.all'), value: 'all' },
+                            {
+                              label: $t('status.ACTIVE'),
+                              value: 'statusACTIVE',
+                            },
+                            {
+                              label: $t('status.INACTIVE'),
+                              value: 'statusINACTIVE',
+                            },
+                          ]"
                         />
-                      </span>
+                      </AdvanceSearch>
                     </template>
                   </q-input>
 
                   <div class="row col-md-6 justify-end">
                     <q-select
-                      v-show="$q.screen.gt.sm"
-                      ref="refFilter"
+                      v-if="$q.screen.gt.sm"
                       v-model="statusFilter"
                       outlined
                       dense

src/stores/branch/index.ts

@@ -39,6 +39,8 @@ const useBranchStore = defineStore('api-branch', () => {
       withHead?: boolean;
       activeOnly?: boolean;
       headOfficeId?: string;
+      startDate?: string;
+      endDate?: string;
     },
     Data extends Pagination<Branch[]>,
   >(opts?: Options): Promise<Data | false> {