From 93af8ce47b085fe628d865b845cc30e05329744d Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 4 Jul 2024 04:14:41 +0000
Subject: [PATCH] fix: stat card scroll

---
 src/components/StatCardComponent.vue          |  2 +-
 src/pages/01_branch-management/MainPage.vue   |  6 +-
 .../02_personnel-management/MainPage.vue      | 30 ++++----
 src/pages/03_customer-management/MainPage.vue | 72 ++++++++++---------
 src/pages/04_product-service/MainPage.vue     | 13 ++--
 5 files changed, 65 insertions(+), 58 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index 9e419b88..2eb2e7c0 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -22,7 +22,7 @@ const props = withDefaults(
   <div
     class="row full-width"
     style="gap: var(--size-4)"
-    :class="{ 'justify-between': $q.screen.lt.md, dark, 'no-wrap': nowrap }"
+    :class="{ dark, 'no-wrap': nowrap }"
   >
     <AppBox
       v-for="v in props.branch"
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index f6b27e3f..61a35296 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -424,8 +424,10 @@ watch(locale, () => {
 
 <template>
   <div class="column full-height no-wrap">
-    <div class="surface-1 bordered rounded q-pa-md q-mb-md scroll">
-      <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap />
+    <div class="surface-1 bordered rounded q-mb-md scroll">
+      <div class="q-ma-md" style="display: inline-block">
+        <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" nowrap />
+      </div>
     </div>
 
     <div
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 14e4f009..07e925c4 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -547,20 +547,22 @@ watch(inputSearch, async () => await fetchUserList());
           {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
         </div>
 
-        <div class="q-px-md scroll">
-          <StatCardComponent
-            v-if="sortedUserStats"
-            :branch="
-              sortedUserStats.map((v) => ({
-                count: v.count,
-                label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
-                color: v.isHeadOffice ? 'pink' : 'purple',
-              }))
-            "
-            :dark="$q.dark.isActive"
-            nowrap
-            class="q-mb-md"
-          />
+        <div class="scroll">
+          <div class="q-mx-md" style="display: inline-block">
+            <StatCardComponent
+              v-if="sortedUserStats"
+              :branch="
+                sortedUserStats.map((v) => ({
+                  count: v.count,
+                  label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+                  color: v.isHeadOffice ? 'pink' : 'purple',
+                }))
+              "
+              :dark="$q.dark.isActive"
+              nowrap
+              class="q-mb-md"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index eb584522..e7fb7e38 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1354,42 +1354,44 @@ watch([inputSearch, currentStatus], async () => {
             }}
           </div>
 
-          <div class="q-px-md scroll">
-            <StatCardComponent
-              v-if="customerStats && selectorLabel === 'EMPLOYER'"
-              labelI18n
-              :branch="
-                customerStats.map((v) => ({
-                  count:
-                    v.name === 'CORP'
-                      ? statsCustomerType?.CORP ?? 0
-                      : statsCustomerType?.PERS ?? 0,
-                  label:
-                    v.name === 'CORP'
-                      ? 'customerLegalEntity'
-                      : 'customerNaturalPerson',
-                  color: v.name === 'CORP' ? 'purple' : 'green',
-                }))
-              "
-              :dark="$q.dark.isActive"
-              nowrap
-              class="q-mb-md"
-            />
+          <div class="scroll">
+            <div class="q-mx-md" style="display: inline-block">
+              <StatCardComponent
+                v-if="customerStats && selectorLabel === 'EMPLOYER'"
+                labelI18n
+                :branch="
+                  customerStats.map((v) => ({
+                    count:
+                      v.name === 'CORP'
+                        ? statsCustomerType?.CORP ?? 0
+                        : statsCustomerType?.PERS ?? 0,
+                    label:
+                      v.name === 'CORP'
+                        ? 'customerLegalEntity'
+                        : 'customerNaturalPerson',
+                    color: v.name === 'CORP' ? 'purple' : 'green',
+                  }))
+                "
+                :dark="$q.dark.isActive"
+                nowrap
+                class="q-mb-md"
+              />
 
-            <StatCardComponent
-              v-if="customerStats && selectorLabel === 'EMPLOYEE'"
-              labelI18n
-              :branch="[
-                {
-                  label: 'EMPLOYEE',
-                  count: statsEmployee,
-                  color: 'pink',
-                },
-              ]"
-              :dark="$q.dark.isActive"
-              nowrap
-              class="q-mb-md"
-            />
+              <StatCardComponent
+                v-if="customerStats && selectorLabel === 'EMPLOYEE'"
+                labelI18n
+                :branch="[
+                  {
+                    label: 'EMPLOYEE',
+                    count: statsEmployee,
+                    color: 'pink',
+                  },
+                ]"
+                :dark="$q.dark.isActive"
+                nowrap
+                class="q-mb-md"
+              />
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index a70965c9..415252ce 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1146,14 +1146,15 @@ watch(inputSearchProductAndService, async () => {
         </div>
       </div>
 
-      <AppBox
+      <div
         v-if="productMode === 'group' || productMode === 'type'"
-        bordered
-        style="overflow-x: scroll"
-        class="q-mb-md"
+        class="q-mb-md bordered rounded surface-1 scroll"
       >
-        <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
-      </AppBox>
+        <div class="q-ma-md" style="display: inline-block">
+          <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
+        </div>
+      </div>
+
       <div
         v-if="productMode === 'group' || productMode === 'type'"
         class="surface-1 col bordered rounded q-pa-md scroll"