fix: แก้ ui แสดงจำนวน

src/components/StatCardComponent.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import AppBox from 'components/app/AppBox.vue';
+import { vModelSelect } from 'vue';
 
 const props = withDefaults(
   defineProps<{
     branch: {
+      icon: string;
       count: number;
       label: string;
       color: 'pink' | 'purple' | 'green' | 'orange';
@@ -27,30 +29,32 @@ const props = withDefaults(
     <AppBox
       v-for="v in props.branch"
       :key="v.label"
-      class="bordered stat-card__wave"
+      class="col-12 no-padding"
       :class="{ [`stat-card__${v.color}`]: true }"
-      style="
-        padding: 12px 16px;
-        height: 75px;
-        min-width: 232px;
-        box-shadow: var(--shadow-2);
-      "
+      style="box-shadow: var(--shadow-2)"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 1440 320"
-        style="width: 100%"
-      >
-        <path
-          class="box-path"
-          d="M0,256L40,245.3C80,235,160,213,240,202.7C320,192,400,192,480,170.7C560,149,640,107,720,106.7C800,107,880,149,960,154.7C1040,160,1120,128,1200,96C1280,64,1360,32,1400,16L1440,0L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"
-        ></path>
-      </svg>
+      <div class="stat-card__content row items-center q-pa-md">
+        <div class="col-4 text-center">
+          <q-avatar
+            size="lg"
+            style="background-color: hsla(0 0% 100% /0.15)"
+            text-color="white"
+            :icon="v.icon"
+          />
+        </div>
+        <div class="col-6 justify-center column">
+          <div class="col-6 ellipsis text-bold" style="width: 100%">
+            {{ labelI18n ? $t(v.label) : v.label }}
+            <q-tooltip
+              anchor="top middle"
+              self="bottom middle"
+              :offset="[10, 10]"
+            >
+              {{ labelI18n ? $t(v.label) : v.label }}
+            </q-tooltip>
+          </div>
 
-      <div class="stat-card__content">
-        <div class="text-h5 text-weight-bold">{{ v.count }}</div>
-        <div class="text-weight-bold text-no-wrap">
-          {{ labelI18n ? $t(v.label) : v.label }}
+          <div class="col-6">{{ v.count }}</div>
         </div>
       </div>
     </AppBox>
@@ -76,53 +80,36 @@ const props = withDefaults(
   }
 }
 
-.stat-card__wave {
-  position: relative;
-  display: flex;
-
-  & svg {
-    width: 200px;
-    position: absolute;
-    left: 0px;
-    bottom: 0;
-    opacity: 0.1;
-
-    & .box-path {
-      fill: var(--_color);
-      fill-opacity: 1;
-    }
-  }
-}
-
 .stat-card__content {
   z-index: 2;
-  color: var(--_color);
+  color: hsla(var(--gray-0-hsl) / 1);
+  background: hsla(var(--_color) / 1);
   height: 100%;
   width: 200px;
 }
 
 .stat-card__purple {
-  --_color: var(--violet-11);
+  --_color: var(--violet-11-hsl);
 }
 
 .stat-card__pink {
-  --_color: var(--pink-6);
+  --_color: var(--pink-6-hsl);
 }
 
 .stat-card__green {
-  --_color: var(--teal-10);
+  --_color: var(--teal-10-hsl);
 }
 
 .stat-card__orange {
-  --_color: var(--orange-5);
+  --_color: var(--orange-5-hsl);
 }
 
 .dark .stat-card__purple {
-  --_color: var(--purple-7);
+  --_color: var(--violet-10-hsl);
 }
 
 .dark .stat-card__green {
-  --_color: var(--teal-7);
+  --_color: var(--teal-8-hsl);
 }
 
 .dark .stat-card__orange {