banu-front/src/features/missionary/pages/MissionaryDashboardPage.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>

        <SkeletonLoaderBlock v-if="isLoading" :rows="1" :cols-per-row="3" />
        <div v-else class="dashboard__stats">
          <DashboardStatCard
            v-for="(stat, i) in requestStats"
            :key="i"
            :icon="stat.icon"
            :label="stat.label"
            :value="stat.value"
            :unit="stat.unit"
            :subtitle="stat.subtitle"
            :to="stat.to"
          />
        </div>
      </section>

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

        <SkeletonLoaderBlock v-if="isLoading" :rows="1" :cols-per-row="2" />
        <p v-else-if="activities.length === 0" class="dashboard__empty">
          فعالیتی برای نمایش وجود ندارد.
        </p>
        <div v-else class="dashboard__activities">
          <DashboardActivityGroup
            v-for="(act, i) in activities"
            :key="i"
            :circle="act.circle"
            :thumb-icon="act.thumbIcon"
            :pill-icon="act.pillIcon"
            :pill-label="act.pillLabel"
            :title="act.title"
            :meta="act.meta"
            :meta-icon="act.metaIcon"
          />
        </div>
      </section>
    </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" />
    </aside>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { toFaDigits, formatJalaaliMeta } from '@/utils/persian'
import { useTehranCalendar } from '@/composables/useTehranCalendar'
import DashboardStatCard from '@/components/dashboard/DashboardStatCard.vue'
import DashboardCalendar from '@/components/dashboard/DashboardCalendar.vue'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import DashboardProfileCard from '@/components/dashboard/DashboardProfileCard.vue'
import { useMissionaryDashboardQuery } from '@/services/query/missionary-dashboard'
import DashboardActivityGroup from '@/components/dashboard/DashboardActivityGroup.vue'

const { data, isLoading } = useMissionaryDashboardQuery()

const dashboard = computed(() => data.value?.data ?? {})

const requestStats = computed(() => {
  const stats = dashboard.value.stats ?? {}
  return [
    {
      icon: 'user-sound',
      label: 'کل درخواست‌ها',
      value: toFaDigits(stats.totalRequests ?? 0),
      unit: 'درخواست',
      subtitle: 'ثبت شده',
      to: { name: 'missionary-requests' },
    },
    {
      icon: 'check-circle',
      label: 'پذیرفته شده',
      value: toFaDigits(stats.acceptedRequests ?? 0),
      unit: 'درخواست',
      subtitle: 'پذیرفته شده',
      to: { name: 'missionary-requests' },
    },
    {
      icon: 'clock',
      label: 'در انتظار بررسی',
      value: toFaDigits(stats.pendingRequests ?? 0),
      unit: 'درخواست',
      subtitle: 'در انتظار',
      to: { name: 'missionary-requests' },
    },
  ]
})

const activities = computed(() => {
  const list = []
  const request = dashboard.value.recentRequests?.[0]
  if (request) {
    list.push({
      circle: true,
      thumbIcon: 'user',
      pillIcon: 'user-sound',
      pillLabel: 'آخرین درخواست اعزام',
      title: request.title,
      metaIcon: 'calendar',
      meta: [
        { label: 'درخواست‌کننده:', value: request.requesterName ?? '' },
        { label: 'تاریخ:', value: formatJalaaliMeta(request.createdAt), numeric: true },
      ],
    })
  }
  const memory = dashboard.value.recentMemories?.[0]
  if (memory) {
    list.push({
      circle: false,
      thumbIcon: 'book',
      pillIcon: 'book',
      pillLabel: 'آخرین خاطره',
      title: memory.title,
      metaIcon: 'calendar',
      meta: [{ label: 'تاریخ ثبت:', value: formatJalaaliMeta(memory.createdAt), numeric: true }],
    })
  }
  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.memoriesCount ?? 0), unit: 'عدد' },
      { label: 'ترم‌های تکمیل‌شده', value: toFaDigits(stats.completedTerms ?? 0), unit: 'عدد' },
    ],
  }
})

const calendar = useTehranCalendar()
</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);
    }
  }

  &__empty {
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
    color: var(--color-prim-gray);
    text-align: center;
    padding: 2rem 0;
    background: rgba(255, 255, 255, 58%);
    border-radius: 0.9375rem;
    margin: 0;
  }

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

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