fix: bugs

src/components/dashboard/DashboardStatCard.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="stat-card">
+  <component
+    :is="to ? RouterLink : 'div'"
+    :to="to || undefined"
+    class="stat-card"
+    :class="{ 'stat-card--linked': to }"
+  >
     <SvgIcon name="card-corner-arrow" :size="'1.5rem'" class="stat-card__corner" />
 
     <div class="stat-card__head">
@@ -14,10 +19,11 @@
         <span class="stat-card__subtitle">{{ subtitle }}</span>
       </div>
     </div>
-  </div>
+  </component>
 </template>
 
 <script setup>
+import { RouterLink } from 'vue-router'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 
 defineProps({
@@ -27,6 +33,7 @@ defineProps({
   value: { type: [String, Number], default: '' },
   unit: { type: String, default: '' },
   subtitle: { type: String, default: '' },
+  to: { type: [String, Object], default: null },
 })
 </script>
 
@@ -41,6 +48,23 @@ defineProps({
   background: rgba(255, 255, 255, 58%);
   box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
   border-radius: 0.9375rem;
+  color: inherit;
+  text-decoration: none;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &--linked {
+    cursor: pointer;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 9px 24px rgba(0, 0, 0, 7%);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 3px;
+    }
+  }
 
   &__corner {
     position: absolute;