fix: bugs

src/features/student/pages/StudentDashboardPage.vue

@@ -19,6 +19,7 @@
             :value="stat.value"
             :unit="stat.unit"
             :subtitle="stat.subtitle"
+            :to="stat.to"
           />
         </div>
       </section>
@@ -95,6 +96,7 @@ const performanceStats = computed(() => {
       value: toFaDigits(stats.attendedSessions ?? 0),
       unit: 'جلسه',
       subtitle: 'اعزام شده است',
+      to: { name: 'student-terms' },
     },
     {
       icon: 'video',
@@ -102,6 +104,7 @@ const performanceStats = computed(() => {
       value: toFaDigits(stats.enrolledTerms ?? 0),
       unit: 'دوره',
       subtitle: 'خریداری شده',
+      to: { name: 'student-terms' },
     },
     {
       icon: 'clock',
@@ -109,6 +112,7 @@ const performanceStats = computed(() => {
       value: toFaDigits(stats.hoursSpent ?? 0),
       unit: 'ساعت',
       subtitle: 'گذرانده شده',
+      to: { name: 'student-terms' },
     },
   ]
 })

src/features/student/pages/components/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;