banu-front/src/features/student/pages/StudentDashboardPage.vue

<template>
  <div class="dashboard">
    <div class="dashboard__main">
      <!-- گزارش عملکرد -->
      <section class="dashboard__section">
        <BoxedIconTitleBlock title="گزارش عملکرد" desc="مروری بر شاخص‌های آموزشی و فعالیت‌های شما.">
          <template #icon>
            <SvgIcon name="heart" :size="24" color="var(--color-primary)" />
          </template>
        </BoxedIconTitleBlock>

        <div class="dashboard__stats">
          <DashboardStatCard
            v-for="(stat, i) in performanceStats"
            :key="i"
            :icon="stat.icon"
            :label="stat.label"
            :value="stat.value"
            :unit="stat.unit"
            :subtitle="stat.subtitle"
          />
        </div>
      </section>

      <!-- فعالیت های اخیر -->
      <section class="dashboard__section">
        <BoxedIconTitleBlock
          title="فعالیت های اخیر"
          desc="گزارشی از جدیدترین خریدها و دوره‌های تکمیل‌شده"
        >
          <template #icon>
            <SvgIcon name="heart" :size="24" color="var(--color-primary)" />
          </template>
        </BoxedIconTitleBlock>

        <div 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" />
              <span class="dashboard__pill-label">{{ act.pillLabel }}</span>
            </div>
            <DashboardActivityCard :title="act.title" :meta="act.meta" :meta-icon="act.metaIcon" />
          </div>
        </div>
      </section>
    </div>

    <aside class="dashboard__aside">
      <DashboardProfileCard
        :name="profile.name"
        :location="profile.location"
        :stats="profile.stats"
      />
      <DashboardCalendar :month-label="calendar.month" :days="calendar.days" />
    </aside>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/icons/SvgIcon.vue'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
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 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 profile = {
  name: 'سید احمد علیزاده',
  location: 'قم، ایران',
  stats: [
    { label: 'مدت عضویت', value: '۲۳', unit: 'روز' },
    { label: 'دوره‌های تکمیل‌شده', value: '۱۲', unit: 'عدد' },
    { label: 'دوره‌های فعال', value: '۵', unit: 'عدد' },
  ],
}

const calendar = {
  month: 'شهریور ماه',
  days: [
    { weekday: 'شنبه', day: '۱۵' },
    { weekday: 'یکشنبه', day: '۱۴' },
    { weekday: 'دوشنبه', day: '۱۳', marker: true },
    { weekday: 'سه شنبه', day: '۱۲' },
    { weekday: 'چهارشنبه', day: '۱۱', selected: true },
    { weekday: 'پنجشنبه', day: '۱۰' },
    { weekday: 'جمعه', day: '۹' },
  ],
}
</script>

<style lang="scss" scoped>
.dashboard {
  display: flex;
  flex-direction: column-reverse;
  gap: 2rem;

  @media (min-width: 1024px) {
    flex-direction: row;
    align-items: flex-start;
  }

  &__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  &__section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  &__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;

    @media (min-width: 640px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  &__activities {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  &__activity {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  &__pill {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 58%);
    box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
    border-radius: 0.9375rem;
  }

  &__pill-icon {
    order: 2;
  }

  &__pill-label {
    order: 1;
    font-family: var(--font-family-fa);
    font-weight: 500;
    font-size: 1.125rem;
    color: #4b4b4b;
  }

  &__aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    @media (min-width: 1024px) {
      width: 19.625rem;
      flex-shrink: 0;
      border-inline-start: 1px solid #e6e6e6;
      padding-inline-start: 2rem;
    }
  }
}
</style>