From 18b7c5c5ab3a99cb6b7a77f8d8be85513443e56b Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 3 Jul 2024 14:12:51 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20=20ui=20?=
 =?UTF-8?q?=20=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=88=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=99=E0=B8=A7=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StatCardComponent.vue | 79 ++++++++++++----------------
 1 file changed, 33 insertions(+), 46 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index 2eb2e7c0..ac7f08a2 100644
--- a/src/components/StatCardComponent.vue
+++ b/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 {