feat: hide stat 03 customer

src/i18n/en-US/index.ts

@@ -60,7 +60,7 @@ export default {
   person: 'Person',
   recordsPage: 'Showing {resultcurrentPage} out of {total} records',
   showing: 'Showing',
-
+  dataSum: 'Data Summaries',
   ...status,
   ...main,
   ...address,

src/i18n/th-th/index.ts

@@ -60,6 +60,7 @@ export default {
   person: 'คน',
   recordsPage: 'แสดง {resultcurrentPage} รายการจาก {total} รายการ',
   showing: 'แสดงทีละ',
+  dataSum: 'สรุปจำนวนข้อมูล',
   ...status,
   ...main,
   ...address,

src/pages/03_customer-management/MainPage.vue

@@ -242,6 +242,7 @@ const formDataEmployee = ref<EmployeeCreate>({
   },
 });
 
+const hideStat = ref(false);
 const branchOption = ref<{ id: string; name: string }[]>();
 const indexTab = ref<number>(0);
 const statusToggle = ref<boolean>(false);
@@ -1332,44 +1333,62 @@ watch([inputSearch, currentStatus], async () => {
 
   <div class="column full-height no-wrap">
     <div v-if="isMainPage" class="column full-height">
+      <div class="text-body-2 q-mb-xs flex items-center">
+        {{ $t('dataSum') }}
+        <q-btn
+          class="q-ml-xs"
+          icon="mdi-pin"
+          color="primary"
+          size="sm"
+          flat
+          dense
+          rounded
+          @click="hideStat = !hideStat"
+          :style="hideStat ? 'rotate: 90deg' : ''"
+          style="transition: 0.1s ease-in-out"
+        />
+      </div>
+
       <div class="row full-width">
         <!-- stat -->
-        <div class="col-12 q-mb-md">
-          <div class="scroll">
-            <StatCardComponent
-              v-if="customerStats"
-              labelI18n
-              :branch="
-                customerStats &&
-                (selectorLabel === 'EMPLOYER'
-                  ? customerStats.map((v) => ({
-                      count:
-                        v.name === 'CORP'
-                          ? statsCustomerType?.CORP ?? 0
-                          : statsCustomerType?.PERS ?? 0,
-                      label:
-                        v.name === 'CORP'
-                          ? 'customerLegalEntity'
-                          : 'customerNaturalPerson',
-                      icon:
-                        v.name === 'CORP'
-                          ? 'mdi-office-building'
-                          : 'mdi-account',
-                      color: v.name === 'CORP' ? 'purple' : 'green',
-                    }))
-                  : [
-                      {
-                        label: 'EMPLOYEE',
-                        count: statsEmployee,
-                        icon: 'mdi-account',
-                        color: 'pink',
-                      },
-                    ])
-              "
-              :dark="$q.dark.isActive"
-            />
+        <transition name="slide">
+          <div v-if="!hideStat" class="col-12 q-mb-md">
+            <div class="scroll">
+              <StatCardComponent
+                v-if="customerStats"
+                labelI18n
+                :branch="
+                  customerStats &&
+                  (selectorLabel === 'EMPLOYER'
+                    ? customerStats.map((v) => ({
+                        count:
+                          v.name === 'CORP'
+                            ? statsCustomerType?.CORP ?? 0
+                            : statsCustomerType?.PERS ?? 0,
+                        label:
+                          v.name === 'CORP'
+                            ? 'customerLegalEntity'
+                            : 'customerNaturalPerson',
+                        icon:
+                          v.name === 'CORP'
+                            ? 'mdi-office-building'
+                            : 'mdi-account',
+                        color: v.name === 'CORP' ? 'purple' : 'green',
+                      }))
+                    : [
+                        {
+                          label: 'EMPLOYEE',
+                          count: statsEmployee,
+                          icon: 'mdi-account',
+                          color: 'pink',
+                        },
+                      ])
+                "
+                :dark="$q.dark.isActive"
+              />
+            </div>
           </div>
-        </div>
+        </transition>
       </div>
 
       <!-- main -->
@@ -3050,4 +3069,18 @@ watch([inputSearch, currentStatus], async () => {
   border-radius: 10px;
   box-shadow: var(--shadow-3);
 }
+
+.slide-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
 </style>