refactor: responsive (#180)

* refactor: can open one dropdown whe lt.md

* style: update MainLayout background color and fix avatar border class name

* feat: add touch position binding for dropdown in ProfileMenu

* refactor: enhance icon styling in DrawerComponent

* fix: update screen size conditions

* feat: add responsive search and filter functionality in MainPage

* feat: update styling and functionality in BasicInformation and MainPage components

* feat: package view mode improve layout and responsiveness

* feat: improve layout and responsiveness of ProfileBanner component

* feat: enhance TreeView component with improved icon layout and cursor pointer styling

* feat: update DialogForm component to prevent text wrapping in the center column

* feat: enhance FormDocument, PriceDataComponent, and BasicInfoProduct components with layout and styling improvements

* feat: enhance ProfileBanner dark tab

* feat: 02 => responsive & responsibleArea type

* fix: layout header bg condition & 02 filter col

* feat: 04 flow => add AddButton component and enhance layout in FormFlow and FlowDialog

* feat: 07 => enhance layout and responsiveness

* refactor: simplify header structure and improve layout consistency

* fix: improve text color in ItemCard and adjust responsive breakpoints in product service group

* refactor: 05 => enhance layout responsiveness and improve class bindings in quotation components

* refactor: enhance styling and improve props flexibility in dialog and select components

* refactor: 05 => enhance layout responsiveness in quotation components

* refactor: 05 => enhance layout responsiveness

* refactor: 05 => formWorkerAdd

* refactor: 05 => formWorkerAdd Product table

* refactor: 05 => improve layout responsiveness and enhance component structure

* refactor: enhance grid view handling and improve component imports

* refactor: improve column classes for better layout consistency

* refactor: 09 => enhance layout structure and improve responsiveness in task order views

* refactor: 10 => enhance invoice main page layout and improve component interactions

* refactor: 13 => enhance receipt main page layout and improve component interactions

* refactor: 11 => enhance layout and improve responsiveness in credit note pages

* refactor: 01 => screen.sm search & filter

* refactor: 01 => improve layout responsiveness and fix variable naming in branch management forms

---------

Co-authored-by: puriphatt <puriphat@frappet.com>

src/pages/10_invoice/MainPage.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { QSelect, useQuasar } from 'quasar';
 
 // NOTE:  Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -20,10 +21,12 @@ import { useInvoice } from 'src/stores/payment';
 import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
 import { Quotation } from 'src/stores/quotations';
 
+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({
@@ -74,7 +77,7 @@ async function fetchStats() {
 }
 
 function triggerView(opts: { quotationId: string }) {
-  const url = new URL(`/quotation/view?tab=invoice`, window.location.origin);
+  const url = new URL('/quotation/view?tab=invoice', window.location.origin);
 
   localStorage.setItem(
     'new-quotation',
@@ -105,6 +108,8 @@ function viewDocExample(quotationId: string) {
 }
 
 onMounted(async () => {
+  pageState.gridView = $q.screen.lt.md ? true : false;
+
   navigatorStore.current.title = 'invoice.title';
   navigatorStore.current.path = [{ text: 'invoice.caption', i18n: true }];
 
@@ -189,7 +194,7 @@ watch(
               outlined
               dense
               :label="$t('general.search')"
-              class="q-mr-md col-12 col-md-3"
+              class="col col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="pageState.inputSearch"
               debounce="200"
@@ -197,14 +202,26 @@ 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"
+                  />
+                </span>
+              </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-5 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5" style="white-space: nowrap">
               <q-select
+                v-show="$q.screen.gt.sm"
+                ref="refFilter"
                 v-model="pageState.statusFilter"
                 outlined
                 dense