feat: hide stat 03-branch

src/i18n/en-US/branch.ts

@@ -21,4 +21,6 @@ export default {
   branchLabelStatus: 'Branch Status',
 
   registeredBranch: 'Registered Branch',
+
+  branchStatTitle: 'Summary data of branch',
 };

src/i18n/en-US/personnel-main-page.ts

@@ -12,7 +12,7 @@ export default {
   DELEGATE: 'Delegate',
   AGENCY: 'Agency',
 
-  personnelStatTitle: 'Summary data of ',
+  personnelStatTitle: 'Summary data',
 
   personnelCardUserType: 'Type',
   personnelCardTelephone: 'Telephone',

src/i18n/th-th/branch.ts

@@ -21,4 +21,6 @@ export default {
   branchLabelStatus: 'สถานะสาขา',
 
   registeredBranch: 'สาขาที่ลงทะเบียน',
+
+  branchStatTitle: 'สรุปจัดการสาขา',
 };

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

@@ -62,6 +62,7 @@ const columns = [
 ] satisfies QTableProps['columns'];
 
 const modal = ref<boolean>(false);
+const hideStat = ref(false);
 
 const profileFileImg = ref<File | undefined>(undefined);
 const imageUrl = ref<string | null>('');
@@ -471,12 +472,31 @@ watch(locale, () => {
 
 <template>
   <div class="column full-height no-wrap">
-    <StatCard
-      class="q-pb-md"
-      label-i18n
-      :branch="stats"
-      :dark="$q.dark.isActive"
-    />
+    <div class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('branchStatTitle') }}
+      <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>
+
+    <transition name="slide">
+      <StatCard
+        v-if="!hideStat"
+        class="q-pb-md"
+        label-i18n
+        :branch="stats"
+        :dark="$q.dark.isActive"
+      />
+    </transition>
 
     <div
       class="column col surface-1 rounded scroll"
@@ -1460,4 +1480,18 @@ watch(locale, () => {
     color: hsla(var(--_branch-card-bg) / 1);
   }
 }
+
+.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>