sajjadtalkhabi
@@ -1,53 +1,256 @@
|
||||
<template>
|
||||
<div class="admin-dashboard">
|
||||
<header class="admin-dashboard__heading">
|
||||
<p class="admin-dashboard__title">پنل مدیریت</p>
|
||||
<p class="admin-dashboard__subtitle">آخرین اطلاعات موسسه شما</p>
|
||||
</header>
|
||||
<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>
|
||||
|
||||
<p class="admin-dashboard__placeholder">این بخش در مراحل بعدی توسعه می‌یابد.</p>
|
||||
<SkeletonLoaderBlock v-if="isLoading" :rows="1" :cols-per-row="3" />
|
||||
<div v-else class="dashboard__stats">
|
||||
<DashboardStatCard
|
||||
v-for="(stat, i) in institutionStats"
|
||||
: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>
|
||||
|
||||
<SkeletonLoaderBlock v-if="isLoading" :rows="2" :cols-per-row="3" />
|
||||
<div v-else class="dashboard__activities">
|
||||
<DashboardActivityGroup
|
||||
v-for="(act, i) in activities"
|
||||
:key="i"
|
||||
circle
|
||||
thumb-icon="user"
|
||||
:pill-icon="act.pillIcon"
|
||||
:pill-label="act.pillLabel"
|
||||
:title="act.title"
|
||||
:meta="act.meta"
|
||||
:meta-icon="act.metaIcon"
|
||||
:avatar-url="act.avatarUrl"
|
||||
/>
|
||||
</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></script>
|
||||
<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 { useAdminDashboardQuery } from '@/services/query/admin-dashboard'
|
||||
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 DashboardActivityGroup from '@/components/dashboard/DashboardActivityGroup.vue'
|
||||
|
||||
const { data, isLoading } = useAdminDashboardQuery()
|
||||
|
||||
const dashboard = computed(() => data.value?.data ?? {})
|
||||
|
||||
const ROLE_LABELS = {
|
||||
admin: 'مدیر سیستم',
|
||||
teacher: 'استاد',
|
||||
counselor: 'مشاور',
|
||||
missionary: 'مبلغ',
|
||||
student: 'دانش‌پژوه',
|
||||
}
|
||||
const ACCESS_LABELS = {
|
||||
full: 'کامل',
|
||||
limited: 'محدود',
|
||||
}
|
||||
|
||||
const formatThousands = (value) => {
|
||||
const n = Number(value ?? 0)
|
||||
return n >= 1000
|
||||
? { value: toFaDigits(Math.round(n / 1000)), unit: 'هزار' }
|
||||
: { value: toFaDigits(n), unit: 'نفر' }
|
||||
}
|
||||
|
||||
const institutionStats = computed(() => {
|
||||
const stats = dashboard.value.stats ?? {}
|
||||
const users = formatThousands(stats.activeUsers)
|
||||
return [
|
||||
{
|
||||
icon: 'user',
|
||||
label: 'آمار کلی کاربران',
|
||||
value: users.value,
|
||||
unit: users.unit,
|
||||
subtitle: 'کاربر فعال',
|
||||
},
|
||||
{
|
||||
icon: 'video',
|
||||
label: 'دوره های ایجاد شده',
|
||||
value: toFaDigits(stats.coursesCreated ?? 0),
|
||||
unit: 'دوره',
|
||||
subtitle: 'ایجاد شده',
|
||||
},
|
||||
{
|
||||
icon: 'shopping-bag',
|
||||
label: 'دوره های فروش رفته',
|
||||
value: toFaDigits(stats.coursesSold ?? 0),
|
||||
unit: 'عدد',
|
||||
subtitle: 'دوره فروش رفته',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const activities = computed(() => {
|
||||
const list = []
|
||||
const registration = dashboard.value.recentRegistrations?.[0]
|
||||
if (registration) {
|
||||
list.push({
|
||||
pillIcon: 'user',
|
||||
pillLabel: 'آخرین افراد ثبت نام شده',
|
||||
title: registration.name,
|
||||
avatarUrl: registration.avatarUrl ?? '',
|
||||
metaIcon: 'calendar',
|
||||
meta: [
|
||||
{
|
||||
label: 'تاریخ ثبت نام:',
|
||||
value: formatJalaaliMeta(registration.registeredAt),
|
||||
numeric: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
const advise = dashboard.value.recentAdviseRequests?.[0]
|
||||
if (advise) {
|
||||
list.push({
|
||||
pillIcon: 'chat',
|
||||
pillLabel: 'اخرین درخواست مشاوره',
|
||||
title: advise.studentName,
|
||||
avatarUrl: advise.avatarUrl ?? '',
|
||||
metaIcon: 'calendar',
|
||||
meta: [
|
||||
{ label: 'تاریخ درخواست:', value: formatJalaaliMeta(advise.createdAt), numeric: true },
|
||||
],
|
||||
})
|
||||
}
|
||||
const service = dashboard.value.recentServiceRequests?.[0]
|
||||
if (service) {
|
||||
list.push({
|
||||
pillIcon: 'users-three',
|
||||
pillLabel: 'اخرین درخواست خدمات',
|
||||
title: service.studentName,
|
||||
avatarUrl: service.avatarUrl ?? '',
|
||||
metaIcon: 'calendar',
|
||||
meta: [
|
||||
{ label: 'تاریخ درخواست:', value: formatJalaaliMeta(service.createdAt), numeric: true },
|
||||
],
|
||||
})
|
||||
}
|
||||
return list
|
||||
})
|
||||
|
||||
const profile = computed(() => {
|
||||
const info = dashboard.value.profile ?? {}
|
||||
return {
|
||||
name: info.name ?? '',
|
||||
avatarUrl: info.avatarUrl ?? '',
|
||||
location: [info.city || info.province, 'ایران'].filter(Boolean).join('، '),
|
||||
stats: [
|
||||
{ label: 'نقش', value: ROLE_LABELS[info.role] ?? info.role ?? '' },
|
||||
{ label: 'سطح دسترسی', value: ACCESS_LABELS[info.accessLevel] ?? info.accessLevel ?? '' },
|
||||
{ label: 'تعداد تیکت‌های باز', value: toFaDigits(info.openTickets ?? 0) },
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
const calendar = useTehranCalendar()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.admin-dashboard {
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
flex-direction: column-reverse;
|
||||
gap: 2rem;
|
||||
|
||||
&__heading {
|
||||
text-align: right;
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
&__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 1.5rem;
|
||||
&__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);
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-prim-gray);
|
||||
margin: 0.25rem 0 0;
|
||||
&__activities {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.25rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-prim-gray);
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
background: #fff;
|
||||
border-radius: 1rem;
|
||||
margin: 0;
|
||||
&__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>
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
<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 ticketStats"
|
||||
: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>
|
||||
|
||||
<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
|
||||
thumb-icon="user"
|
||||
: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 { useCounselorDashboardQuery } from '@/services/query/counselor-dashboard'
|
||||
import DashboardProfileCard from '@/components/dashboard/DashboardProfileCard.vue'
|
||||
import DashboardActivityGroup from '@/components/dashboard/DashboardActivityGroup.vue'
|
||||
|
||||
const { data, isLoading } = useCounselorDashboardQuery()
|
||||
|
||||
const dashboard = computed(() => data.value?.data ?? {})
|
||||
|
||||
const ticketStats = computed(() => {
|
||||
const stats = dashboard.value.stats ?? {}
|
||||
return [
|
||||
{
|
||||
icon: 'chat',
|
||||
label: 'تیکت‌های باز',
|
||||
value: toFaDigits(stats.openTickets ?? 0),
|
||||
unit: 'تیکت',
|
||||
subtitle: 'در انتظار پاسخ',
|
||||
},
|
||||
{
|
||||
icon: 'check-circle',
|
||||
label: 'پاسخ داده شده',
|
||||
value: toFaDigits(stats.answeredTickets ?? 0),
|
||||
unit: 'تیکت',
|
||||
subtitle: 'پاسخ داده شده',
|
||||
},
|
||||
{
|
||||
icon: 'check',
|
||||
label: 'بسته شده',
|
||||
value: toFaDigits(stats.closedTickets ?? 0),
|
||||
unit: 'تیکت',
|
||||
subtitle: 'بسته شده',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const activities = computed(() =>
|
||||
(dashboard.value.recentTickets ?? []).map((ticket) => ({
|
||||
pillIcon: 'chat',
|
||||
pillLabel: 'آخرین درخواست مشاوره',
|
||||
title: ticket.studentName,
|
||||
metaIcon: 'calendar',
|
||||
meta: [
|
||||
{ label: 'موضوع:', value: ticket.subject ?? '' },
|
||||
{ label: 'تاریخ:', value: formatJalaaliMeta(ticket.createdAt), numeric: true },
|
||||
],
|
||||
}))
|
||||
)
|
||||
|
||||
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.totalTickets ?? 0), unit: 'عدد' },
|
||||
{ label: 'واگذار به من', value: toFaDigits(stats.assignedToMe ?? 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: 19.625rem;
|
||||
flex-shrink: 0;
|
||||
border-inline-start: 1px solid #e6e6e6;
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,15 @@
|
||||
export default [
|
||||
{
|
||||
path: '/counselor/dashboard',
|
||||
name: 'counselor-dashboard',
|
||||
component: () => import('@/features/counselor/pages/CounselorDashboardPage.vue'),
|
||||
meta: {
|
||||
layout: 'counselor',
|
||||
role: 'counselor',
|
||||
title: 'سلام بر شما',
|
||||
subtitle: 'به پنل مشاوره بانو خوش آمدید.',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/counselor/consultations',
|
||||
name: 'counselor-consultations',
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
<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"
|
||||
/>
|
||||
</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: 'ثبت شده',
|
||||
},
|
||||
{
|
||||
icon: 'check-circle',
|
||||
label: 'پذیرفته شده',
|
||||
value: toFaDigits(stats.acceptedRequests ?? 0),
|
||||
unit: 'درخواست',
|
||||
subtitle: 'پذیرفته شده',
|
||||
},
|
||||
{
|
||||
icon: 'clock',
|
||||
label: 'در انتظار بررسی',
|
||||
value: toFaDigits(stats.pendingRequests ?? 0),
|
||||
unit: 'درخواست',
|
||||
subtitle: 'در انتظار',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
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: 19.625rem;
|
||||
flex-shrink: 0;
|
||||
border-inline-start: 1px solid #e6e6e6;
|
||||
padding-inline-start: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,15 @@
|
||||
export default [
|
||||
{
|
||||
path: '/missionary-panel/dashboard',
|
||||
name: 'missionary-dashboard',
|
||||
component: () => import('@/features/missionary/pages/MissionaryDashboardPage.vue'),
|
||||
meta: {
|
||||
layout: 'missionary',
|
||||
role: 'missionary',
|
||||
title: 'سلام بر شما',
|
||||
subtitle: 'به پنل اعزام بانو خوش آمدید.',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/missionary-panel/requests',
|
||||
name: 'missionary-requests',
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user