feat: hide stat 04 product service

src/pages/04_product-service/MainPage.vue

@@ -198,6 +198,7 @@ const serviceTab = [
     label: 'workInformation',
   },
 ];
+const hideStat = ref(false);
 
 const workItems = ref<WorkItems[]>([]);
 const workNameRef = ref();
@@ -1183,13 +1184,42 @@ watch(inputSearchProductAndService, async () => {
 
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="scroll q-mb-md"
+        class="text-body-2 q-mb-xs flex items-center"
       >
-        <div style="display: inline-block">
-          <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
-        </div>
+        {{ $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>
 
+      <transition name="slide">
+        <div
+          v-if="
+            (productMode === 'group' && !hideStat) ||
+            (productMode === 'type' && !hideStat)
+          "
+          class="scroll q-mb-md"
+        >
+          <div style="display: inline-block">
+            <StatCard
+              label-i18n
+              :branch="stat"
+              :dark="$q.dark.isActive"
+              nowrap
+            />
+          </div>
+        </div>
+      </transition>
+
       <div
         v-if="productMode === 'group' || productMode === 'type'"
         class="surface-1 col bordered rounded q-pa-md scroll"