From 3331afaaa366914c44dde8a92974edbeecf6eb70 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 28 Jan 2025 13:53:01 +0700
Subject: [PATCH] refactor: 11, 12 => improve layout and styling for Credit and
 Debit Note pages

---
 src/pages/11_credit-note/MainPage.vue |  2 +-
 src/pages/12_debit-note/MainPage.vue  | 25 +++++++++++--------------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/pages/11_credit-note/MainPage.vue b/src/pages/11_credit-note/MainPage.vue
index b17ee8bb..aa5fcb93 100644
--- a/src/pages/11_credit-note/MainPage.vue
+++ b/src/pages/11_credit-note/MainPage.vue
@@ -227,7 +227,7 @@ watch(
                 v-if="!pageState.gridView"
                 id="select-field"
                 for="select-field"
-                class="col q-ml-sm"
+                class="col-md-5 q-ml-sm"
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,
diff --git a/src/pages/12_debit-note/MainPage.vue b/src/pages/12_debit-note/MainPage.vue
index 2143ba59..16c58b1e 100644
--- a/src/pages/12_debit-note/MainPage.vue
+++ b/src/pages/12_debit-note/MainPage.vue
@@ -22,14 +22,14 @@ import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'src/stores/flow';
 import { pageTabs, columns, hslaColors } from './constants';
 import { DebitNoteStatus, useDebitNote } from 'src/stores/debit-note';
-import { ref } from 'vue';
 import { dialogWarningClose } from 'src/stores/utils';
+import { useQuasar } from 'quasar';
 
+const $q = useQuasar();
 const { t } = useI18n();
 const flow = useFlowStore();
 const navigator = useNavigator();
 const debitNote = useDebitNote();
-const selectedQuotationId = ref<string>('');
 const { stats, pageMax, page, data, pageSize } = storeToRefs(debitNote);
 
 // NOTE: Variable
@@ -121,6 +121,7 @@ function close() {
 }
 
 onMounted(async () => {
+  pageState.gridView = $q.screen.lt.md ? true : false;
   navigator.current.title = 'debitNote.title';
   navigator.current.path = [{ text: 'debitNote.caption', i18n: true }];
 
@@ -182,32 +183,32 @@ watch(
             :branch="[
               {
                 icon: 'material-symbols-light:receipt-long',
-                count: stats[DebitNoteStatus.Pending],
+                count: stats[DebitNoteStatus.Pending] || 0,
                 label: `debitNote.stats.${DebitNoteStatus.Pending}`,
                 color: 'orange',
               },
               {
                 icon: 'mdi-clock-alert-outline',
-                count: stats[DebitNoteStatus.Expire],
+                count: stats[DebitNoteStatus.Expire] || 0,
                 label: `debitNote.stats.${DebitNoteStatus.Expire}`,
                 color: 'cyan',
               },
               {
                 icon: 'tabler:cash-register',
-                count: stats[DebitNoteStatus.Payment],
+                count: stats[DebitNoteStatus.Payment] || 0,
                 label: `debitNote.stats.${DebitNoteStatus.Payment}`,
                 color: 'dark-orange',
               },
               {
                 icon: 'fluent:receipt-money-16-regular',
-                count: stats[DebitNoteStatus.Receipt],
+                count: stats[DebitNoteStatus.Receipt] || 0,
                 label: `debitNote.stats.${DebitNoteStatus.Receipt}`,
                 color: 'green',
               },
 
               {
                 icon: 'mdi-check-decagram-outline',
-                count: stats[DebitNoteStatus.Succeed],
+                count: stats[DebitNoteStatus.Succeed] || 0,
                 label: `debitNote.stats.${DebitNoteStatus.Succeed}`,
                 color: 'blue',
               },
@@ -233,7 +234,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"
@@ -243,16 +244,12 @@ watch(
               </template>
             </q-input>
 
-            <div
-              class="row col-12 col-md-3 justify-end"
-              :class="{ 'q-pt-xs': $q.screen.lt.md }"
-              style="white-space: nowrap"
-            >
+            <div class="row col-md-5 justify-end" style="white-space: nowrap">
               <q-select
                 v-if="!pageState.gridView"
                 id="select-field"
                 for="select-field"
-                class="col"
+                class="col-md-5 q-ml-sm"
                 :options="
                   fieldSelectedOption.map((v) => ({
                     ...v,