fix: dashboard

src/features/student/pages/StudentDashboardPage.vue

@@ -9,7 +9,8 @@
           </template>
         </BoxedIconTitleBlock>
 
-        <div class="dashboard__stats">
+        <SkeletonLoaderBlock v-if="isLoading" :rows="1" :cols-per-row="3" />
+        <div v-else class="dashboard__stats">
           <DashboardStatCard
             v-for="(stat, i) in performanceStats"
             :key="i"
@@ -33,7 +34,8 @@
           </template>
         </BoxedIconTitleBlock>
 
-        <div class="dashboard__activities">
+        <SkeletonLoaderBlock v-if="isLoading" :rows="2" :cols-per-row="2" />
+        <div v-else class="dashboard__activities">
           <div v-for="(act, i) in activities" :key="i" class="dashboard__activity">
             <div class="dashboard__pill">
               <SvgIcon :name="act.pillIcon" :size="'1.125rem'" class="dashboard__pill-icon" />
@@ -46,9 +48,12 @@
     </div>
 
     <aside class="dashboard__aside">
+      <SkeletonLoaderBlock v-if="isLoading" :rows="2" :cols-per-row="1" />
       <DashboardProfileCard
+        v-else
         :name="profile.name"
         :location="profile.location"
+        :avatar-url="profile.avatarUrl"
         :stats="profile.stats"
       />
       <DashboardCalendar :month-label="calendar.month" :days="calendar.days" />
@@ -57,83 +62,150 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { toJalaali } from '@/utils/date-utils'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
+import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
+import { useStudentDashboardQuery } from '@/services/query/student-dashboard'
 import DashboardStatCard from '@/features/student/pages/components/DashboardStatCard.vue'
 import DashboardCalendar from '@/features/student/pages/components/DashboardCalendar.vue'
 import DashboardProfileCard from '@/features/student/pages/components/DashboardProfileCard.vue'
 import DashboardActivityCard from '@/features/student/pages/components/DashboardActivityCard.vue'
 
-const performanceStats = [
-  {
-    icon: 'clock',
-    label: 'ساعات آموزشی سپری‌شده',
-    value: '۲۵',
-    unit: 'ساعت',
-    subtitle: 'گذرانده شده',
-  },
-  {
-    icon: 'video',
-    label: 'دوره های خریداری شده',
-    value: '۶',
-    unit: 'دوره',
-    subtitle: 'خریداری شده',
-  },
-  {
-    icon: 'user-sound',
-    label: 'تعداد جلسات اعزام شده',
-    value: '۱۲',
-    unit: 'جلسه',
-    subtitle: 'اعزام شده است',
-  },
-]
+const { data, isLoading } = useStudentDashboardQuery()
 
-const activities = [
-  {
-    pillIcon: 'shopping-bag',
-    pillLabel: 'آخرین دوره خریداری شده',
-    title: 'دوره تاریخچه ایران قدیم',
-    metaIcon: 'calendar',
-    meta: [
-      { label: 'تاریخ شروع:', value: '۱۴۰۰/۷/۱۹, ۸:۳۰', numeric: true },
-      { label: 'استاد:', value: 'علیرضا حسنی' },
-      { label: 'تاریخ پایان:', value: '۱۴۰۰/۱۱/۱۰, ۸:۳۰', numeric: true },
-    ],
-  },
-  {
-    pillIcon: 'video',
-    pillLabel: 'اخرین جلسه دیده شده',
-    title: 'دوره تخصصی تربیت مبلغ بین الملل',
-    metaIcon: 'video',
-    meta: [
-      { label: 'جلسه:', value: 'بیستم و دوم' },
-      { label: 'استاد:', value: 'علیرضا حسنی' },
-    ],
-  },
-]
+const dashboard = computed(() => data.value?.data ?? {})
 
-const profile = {
-  name: 'سید احمد علیزاده',
-  location: 'قم، ایران',
-  stats: [
-    { label: 'مدت عضویت', value: '۲۳', unit: 'روز' },
-    { label: 'دوره‌های تکمیل‌شده', value: '۱۲', unit: 'عدد' },
-    { label: 'دوره‌های فعال', value: '۵', unit: 'عدد' },
-  ],
+const toFaDigits = (value) => String(value ?? '').replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
+
+const formatMetaDateTime = (iso) => {
+  const match = String(iso ?? '').match(/^(\d{4})-(\d{2})-(\d{2})[\sT](\d{2}):(\d{2})/)
+  if (!match) return ''
+  const { jy, jm, jd } = toJalaali(Number(match[1]), Number(match[2]), Number(match[3]))
+  return toFaDigits(`${jy}/${jm}/${jd}, ${Number(match[4])}:${match[5]}`)
 }
 
-const calendar = {
-  month: 'شهریور ماه',
-  days: [
-    { weekday: 'شنبه', day: '۱۵' },
-    { weekday: 'یکشنبه', day: '۱۴' },
-    { weekday: 'دوشنبه', day: '۱۳', marker: true },
-    { weekday: 'سه شنبه', day: '۱۲' },
-    { weekday: 'چهارشنبه', day: '۱۱', selected: true },
-    { weekday: 'پنجشنبه', day: '۱۰' },
-    { weekday: 'جمعه', day: '۹' },
-  ],
+const performanceStats = computed(() => {
+  const stats = dashboard.value.stats ?? {}
+  return [
+    {
+      icon: 'user-sound',
+      label: 'تعداد جلسات اعزام شده',
+      value: toFaDigits(stats.attendedSessions ?? 0),
+      unit: 'جلسه',
+      subtitle: 'اعزام شده است',
+    },
+    {
+      icon: 'video',
+      label: 'دوره های خریداری شده',
+      value: toFaDigits(stats.enrolledTerms ?? 0),
+      unit: 'دوره',
+      subtitle: 'خریداری شده',
+    },
+    {
+      icon: 'clock',
+      label: 'ساعات آموزشی سپری‌شده',
+      value: toFaDigits(stats.hoursSpent ?? 0),
+      unit: 'ساعت',
+      subtitle: 'گذرانده شده',
+    },
+  ]
+})
+
+const activities = computed(() => {
+  const list = []
+  const course = dashboard.value.lastEnrolledCourse
+  if (course) {
+    list.push({
+      pillIcon: 'shopping-bag',
+      pillLabel: 'آخرین دوره خریداری شده',
+      title: course.title,
+      metaIcon: 'calendar',
+      meta: [
+        { label: 'تاریخ شروع:', value: formatMetaDateTime(course.startsAt), numeric: true },
+        { label: 'استاد:', value: course.teacher?.name ?? '' },
+        { label: 'تاریخ پایان:', value: formatMetaDateTime(course.endsAt), numeric: true },
+      ],
+    })
+  }
+  const session = dashboard.value.lastWatchedSession
+  if (session) {
+    const sessionName =
+      session.title?.replace(/^جلسه\s*/u, '') || toFaDigits(session.sessionNumber ?? '')
+    list.push({
+      pillIcon: 'video',
+      pillLabel: 'اخرین جلسه دیده شده',
+      title: session.courseTitle,
+      metaIcon: 'video',
+      meta: [
+        { label: 'جلسه:', value: sessionName },
+        { label: 'استاد:', value: session.teacher?.name ?? '' },
+      ],
+    })
+  }
+  return list
+})
+
+const profile = computed(() => {
+  const info = dashboard.value.profile ?? {}
+  const stats = dashboard.value.stats ?? {}
+  return {
+    name: info.name ?? '',
+    avatarUrl: info.avatarUrl ?? '',
+    location: [info.city || info.province, 'ایران'].filter(Boolean).join('، '),
+    stats: [
+      { label: 'مدت عضویت', value: toFaDigits(info.membershipDays ?? 0), unit: 'روز' },
+      { label: 'دوره‌های تکمیل‌شده', value: toFaDigits(stats.completedCourses ?? 0), unit: 'عدد' },
+      { label: 'دوره‌های فعال', value: toFaDigits(stats.activeCourses ?? 0), unit: 'عدد' },
+    ],
+  }
+})
+
+const WEEKDAY_NAMES = ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه']
+const MONTH_NAMES = [
+  'فروردین',
+  'اردیبهشت',
+  'خرداد',
+  'تیر',
+  'مرداد',
+  'شهریور',
+  'مهر',
+  'آبان',
+  'آذر',
+  'دی',
+  'بهمن',
+  'اسفند',
+]
+const GREGORIAN_WEEKDAYS = ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']
+const DAY_MS = 24 * 60 * 60 * 1000
+
+const buildTehranCalendar = () => {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'Asia/Tehran',
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    weekday: 'short',
+  }).formatToParts(new Date())
+  const part = (type) => parts.find((p) => p.type === type)?.value
+  const todayIndex = GREGORIAN_WEEKDAYS.indexOf(part('weekday'))
+  const todayUtc = Date.UTC(Number(part('year')), Number(part('month')) - 1, Number(part('day')))
+  const weekStartUtc = todayUtc - todayIndex * DAY_MS
+
+  const today = new Date(todayUtc)
+  const { jm } = toJalaali(today.getUTCFullYear(), today.getUTCMonth() + 1, today.getUTCDate())
+
+  const days = WEEKDAY_NAMES.map((weekday, i) => {
+    const date = new Date(weekStartUtc + i * DAY_MS)
+    const { jd } = toJalaali(date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate())
+    return { weekday, day: toFaDigits(jd), selected: i === todayIndex }
+  })
+
+  return { month: `${MONTH_NAMES[jm - 1]} ماه`, days }
 }
+
+const calendar = buildTehranCalendar()
 </script>
 
 <style lang="scss" scoped>