sajjadtalkhabi
@@ -0,0 +1,143 @@
|
|||||||
|
<template>
|
||||||
|
<div class="activity-card">
|
||||||
|
<SvgIcon name="card-corner-arrow" :size="'1.5rem'" class="activity-card__corner" />
|
||||||
|
|
||||||
|
<div class="activity-card__thumb" :class="{ 'activity-card__thumb--circle': circle }">
|
||||||
|
<img v-if="avatarUrl" :src="avatarUrl" :alt="title" class="activity-card__thumb-img" />
|
||||||
|
<SvgIcon v-else :name="thumbIcon" :size="'1.5rem'" color="#848484" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="activity-card__body">
|
||||||
|
<p class="activity-card__title">{{ title }}</p>
|
||||||
|
|
||||||
|
<div class="activity-card__meta">
|
||||||
|
<SvgIcon :name="metaIcon" :size="'0.875rem'" class="activity-card__meta-icon" />
|
||||||
|
<div class="activity-card__rows">
|
||||||
|
<p v-for="(row, i) in meta" :key="i" class="activity-card__row">
|
||||||
|
<span class="activity-card__row-label">{{ row.label }}</span>
|
||||||
|
<span
|
||||||
|
class="activity-card__row-value"
|
||||||
|
:class="{ 'activity-card__row-value--num': row.numeric }"
|
||||||
|
>
|
||||||
|
{{ row.value }}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
title: { type: String, default: '' },
|
||||||
|
/** rows of { label, value, numeric? } */
|
||||||
|
meta: { type: Array, default: () => [] },
|
||||||
|
/** @type {import('vue').PropType<import('@/components/icons/icon-names').IconName>} */
|
||||||
|
metaIcon: { type: String, default: 'calendar' },
|
||||||
|
/** thumbnail glyph shown when there is no avatarUrl */
|
||||||
|
thumbIcon: { type: String, default: 'play' },
|
||||||
|
/** render the thumbnail as a circular avatar instead of a rounded square */
|
||||||
|
circle: { type: Boolean, default: false },
|
||||||
|
avatarUrl: { type: String, default: '' },
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.activity-card {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.875rem 1rem;
|
||||||
|
min-height: 5.9375rem;
|
||||||
|
background: rgba(255, 255, 255, 58%);
|
||||||
|
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||||
|
border-radius: 0.9375rem;
|
||||||
|
|
||||||
|
&__corner {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: 0.75rem;
|
||||||
|
inset-inline-end: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__thumb {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 3.6875rem;
|
||||||
|
height: 3.6875rem;
|
||||||
|
background: #f4f4f4;
|
||||||
|
border-radius: 0.9375rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&--circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__thumb-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.625rem;
|
||||||
|
text-align: start;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #4b4b4b;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta-icon {
|
||||||
|
order: 2;
|
||||||
|
margin-top: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__rows {
|
||||||
|
order: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
color: #4b4b4b;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__row-value {
|
||||||
|
&--num {
|
||||||
|
font-family: var(--font-family-number-fa);
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="activity-group">
|
||||||
|
<div class="activity-group__pill">
|
||||||
|
<SvgIcon :name="pillIcon" :size="'1.125rem'" class="activity-group__pill-icon" />
|
||||||
|
<span class="activity-group__pill-label">{{ pillLabel }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DashboardActivityCard
|
||||||
|
:title="title"
|
||||||
|
:meta="meta"
|
||||||
|
:meta-icon="metaIcon"
|
||||||
|
:thumb-icon="thumbIcon"
|
||||||
|
:circle="circle"
|
||||||
|
:avatar-url="avatarUrl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||||
|
import DashboardActivityCard from '@/components/dashboard/DashboardActivityCard.vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
/** @type {import('vue').PropType<import('@/components/icons/icon-names').IconName>} */
|
||||||
|
pillIcon: { type: String, default: 'shopping-bag' },
|
||||||
|
pillLabel: { type: String, default: '' },
|
||||||
|
title: { type: String, default: '' },
|
||||||
|
meta: { type: Array, default: () => [] },
|
||||||
|
metaIcon: { type: String, default: 'calendar' },
|
||||||
|
thumbIcon: { type: String, default: 'play' },
|
||||||
|
circle: { type: Boolean, default: false },
|
||||||
|
avatarUrl: { type: String, default: '' },
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.activity-group {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
<template>
|
||||||
|
<div class="calendar">
|
||||||
|
<p class="calendar__title">{{ monthLabel }}</p>
|
||||||
|
|
||||||
|
<div class="calendar__week">
|
||||||
|
<div
|
||||||
|
v-for="(d, i) in days"
|
||||||
|
:key="i"
|
||||||
|
class="calendar__day"
|
||||||
|
:class="{ 'calendar__day--active': d.selected }"
|
||||||
|
>
|
||||||
|
<span v-if="d.marker" class="calendar__marker" />
|
||||||
|
<span class="calendar__weekday">{{ d.weekday }}</span>
|
||||||
|
<span class="calendar__date">{{ d.day }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
monthLabel: { type: String, default: '' },
|
||||||
|
/** ordered right-to-left: { weekday, day, selected?, marker? } */
|
||||||
|
days: { type: Array, default: () => [] },
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.calendar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1.125rem 1rem;
|
||||||
|
background: rgba(255, 255, 255, 58%);
|
||||||
|
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||||
|
border-radius: 0.9375rem;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
margin: 0;
|
||||||
|
text-align: start;
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__week {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__day {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.375rem 0.125rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background: var(--color-secondary);
|
||||||
|
box-shadow: 0 9px 9.75px rgba(0, 112, 116, 19%);
|
||||||
|
|
||||||
|
.calendar__weekday,
|
||||||
|
.calendar__date {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__marker {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: 0.125rem;
|
||||||
|
inset-inline-start: 0.25rem;
|
||||||
|
width: 0.25rem;
|
||||||
|
height: 0.25rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__weekday {
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.625rem;
|
||||||
|
color: #828282;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__date {
|
||||||
|
font-family: var(--font-family-number-fa);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #717171;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
<template>
|
||||||
|
<div class="profile-card">
|
||||||
|
<div class="profile-card__avatar">
|
||||||
|
<img v-if="avatarUrl" :src="avatarUrl" :alt="name" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="profile-card__name">{{ name }}</p>
|
||||||
|
|
||||||
|
<div class="profile-card__location">
|
||||||
|
<SvgIcon name="map-pin-simple-area" :size="'0.9375rem'" />
|
||||||
|
<span>{{ location }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="profile-card__stats">
|
||||||
|
<div v-for="(stat, i) in stats" :key="i" class="profile-card__stat">
|
||||||
|
<span class="profile-card__stat-label">{{ stat.label }}</span>
|
||||||
|
<span
|
||||||
|
class="profile-card__stat-value"
|
||||||
|
:class="{ 'profile-card__stat-value--text': !isNumeric(stat.value) }"
|
||||||
|
>
|
||||||
|
{{ stat.value }}
|
||||||
|
<span v-if="stat.unit" class="profile-card__stat-unit">{{ stat.unit }}</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
name: { type: String, default: '' },
|
||||||
|
location: { type: String, default: '' },
|
||||||
|
avatarUrl: { type: String, default: '' },
|
||||||
|
/** mini-stats of { label, value, unit? } */
|
||||||
|
stats: { type: Array, default: () => [] },
|
||||||
|
})
|
||||||
|
|
||||||
|
const isNumeric = (value) => /^[\d۰-۹]+$/.test(String(value ?? '').trim())
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.profile-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 2rem 1.25rem 1.5rem;
|
||||||
|
background: rgba(255, 255, 255, 58%);
|
||||||
|
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||||
|
border-radius: 0.9375rem;
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
width: 7.75rem;
|
||||||
|
height: 7.75rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f4f4f4;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__name {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__location {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #989898;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__stat-label {
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
color: #a7a7a7;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__stat-value {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.25rem;
|
||||||
|
font-family: var(--font-family-number-fa);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.5625rem;
|
||||||
|
color: #818181;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&--text {
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__stat-unit {
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #929292;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<div class="stat-card">
|
||||||
|
<SvgIcon name="card-corner-arrow" :size="'1.5rem'" class="stat-card__corner" />
|
||||||
|
|
||||||
|
<div class="stat-card__head">
|
||||||
|
<SvgIcon :name="icon" :size="'1.0625rem'" class="stat-card__head-icon" />
|
||||||
|
<span class="stat-card__label">{{ label }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stat-card__body">
|
||||||
|
<span class="stat-card__value">{{ value }}</span>
|
||||||
|
<div class="stat-card__meta">
|
||||||
|
<span class="stat-card__unit">{{ unit }}</span>
|
||||||
|
<span class="stat-card__subtitle">{{ subtitle }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
/** @type {import('vue').PropType<import('@/components/icons/icon-names').IconName>} */
|
||||||
|
icon: { type: String, required: true },
|
||||||
|
label: { type: String, default: '' },
|
||||||
|
value: { type: [String, Number], default: '' },
|
||||||
|
unit: { type: String, default: '' },
|
||||||
|
subtitle: { type: String, default: '' },
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.stat-card {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 1.125rem 1.25rem;
|
||||||
|
min-height: 8.75rem;
|
||||||
|
background: rgba(255, 255, 255, 58%);
|
||||||
|
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
|
||||||
|
border-radius: 0.9375rem;
|
||||||
|
|
||||||
|
&__corner {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: 0.875rem;
|
||||||
|
inset-inline-end: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__head-icon {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
order: 1;
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: #4b4b4b;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 0.625rem;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__value {
|
||||||
|
font-family: var(--font-family-number-fa);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 4rem;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--color-primary);
|
||||||
|
text-shadow: 0 5.25px 8.625px rgba(243, 102, 117, 18%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__unit {
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: #6e6e6e;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-family: var(--font-family-fa);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #6e6e6e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { toFaDigits } from '@/utils/persian'
|
||||||
|
import { toJalaali } from '@/utils/date-utils'
|
||||||
|
|
||||||
|
const WEEKDAY_NAMES = ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه']
|
||||||
|
const MONTH_NAMES = [
|
||||||
|
'فروردین',
|
||||||
|
'اردیبهشت',
|
||||||
|
'خرداد',
|
||||||
|
'تیر',
|
||||||
|
'مرداد',
|
||||||
|
'شهریور',
|
||||||
|
'مهر',
|
||||||
|
'آبان',
|
||||||
|
'آذر',
|
||||||
|
'دی',
|
||||||
|
'بهمن',
|
||||||
|
'اسفند',
|
||||||
|
]
|
||||||
|
const GREGORIAN_WEEKDAYS = ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']
|
||||||
|
const DAY_MS = 24 * 60 * 60 * 1000
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Builds the current Jalaali week (Saturday → Friday) anchored to the Asia/Tehran
|
||||||
|
* timezone, independent of the viewer's local clock. The day matching Tehran's
|
||||||
|
* "today" is flagged `selected`. Returns `{ month, days }` for DashboardCalendar.
|
||||||
|
*/
|
||||||
|
export const useTehranCalendar = () => {
|
||||||
|
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 }
|
||||||
|
}
|
||||||
+2
-2
@@ -220,6 +220,6 @@ export const MISSIONARY_REQUEST_STATUS = Object.freeze({
|
|||||||
// page. Roles not listed here fall back to the student dashboard.
|
// page. Roles not listed here fall back to the student dashboard.
|
||||||
export const ROLE_HOME_ROUTES = Object.freeze({
|
export const ROLE_HOME_ROUTES = Object.freeze({
|
||||||
admin: 'admin-dashboard',
|
admin: 'admin-dashboard',
|
||||||
counselor: 'counselor-consultations',
|
counselor: 'counselor-dashboard',
|
||||||
missionary: 'missionary-requests',
|
missionary: 'missionary-dashboard',
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,53 +1,256 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="admin-dashboard">
|
<div class="dashboard">
|
||||||
<header class="admin-dashboard__heading">
|
<div class="dashboard__main">
|
||||||
<p class="admin-dashboard__title">پنل مدیریت</p>
|
<!-- اطلاعات موسسه -->
|
||||||
<p class="admin-dashboard__subtitle">آخرین اطلاعات موسسه شما</p>
|
<section class="dashboard__section">
|
||||||
</header>
|
<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>
|
</div>
|
||||||
</template>
|
</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>
|
<style lang="scss" scoped>
|
||||||
.admin-dashboard {
|
.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(3, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__aside {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
|
|
||||||
&__heading {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
font-family: var(--font-family-fa);
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
font-size: 1.5rem;
|
width: 19.625rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-inline-start: 1px solid #e6e6e6;
|
||||||
|
padding-inline-start: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__subtitle {
|
|
||||||
font-family: var(--font-family-fa);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: var(--color-prim-gray);
|
|
||||||
margin: 0.25rem 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</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 [
|
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',
|
path: '/counselor/consultations',
|
||||||
name: '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 [
|
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',
|
path: '/missionary-panel/requests',
|
||||||
name: 'missionary-requests',
|
name: 'missionary-requests',
|
||||||
|
|||||||
@@ -9,7 +9,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</BoxedIconTitleBlock>
|
</BoxedIconTitleBlock>
|
||||||
|
|
||||||
<div class="dashboard__stats">
|
<SkeletonLoaderBlock v-if="isLoading" :rows="1" :cols-per-row="3" />
|
||||||
|
<div v-else class="dashboard__stats">
|
||||||
<DashboardStatCard
|
<DashboardStatCard
|
||||||
v-for="(stat, i) in performanceStats"
|
v-for="(stat, i) in performanceStats"
|
||||||
:key="i"
|
:key="i"
|
||||||
@@ -33,7 +34,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</BoxedIconTitleBlock>
|
</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 v-for="(act, i) in activities" :key="i" class="dashboard__activity">
|
||||||
<div class="dashboard__pill">
|
<div class="dashboard__pill">
|
||||||
<SvgIcon :name="act.pillIcon" :size="'1.125rem'" class="dashboard__pill-icon" />
|
<SvgIcon :name="act.pillIcon" :size="'1.125rem'" class="dashboard__pill-icon" />
|
||||||
@@ -46,9 +48,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<aside class="dashboard__aside">
|
<aside class="dashboard__aside">
|
||||||
|
<SkeletonLoaderBlock v-if="isLoading" :rows="2" :cols-per-row="1" />
|
||||||
<DashboardProfileCard
|
<DashboardProfileCard
|
||||||
|
v-else
|
||||||
:name="profile.name"
|
:name="profile.name"
|
||||||
:location="profile.location"
|
:location="profile.location"
|
||||||
|
:avatar-url="profile.avatarUrl"
|
||||||
:stats="profile.stats"
|
:stats="profile.stats"
|
||||||
/>
|
/>
|
||||||
<DashboardCalendar :month-label="calendar.month" :days="calendar.days" />
|
<DashboardCalendar :month-label="calendar.month" :days="calendar.days" />
|
||||||
@@ -57,83 +62,150 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import { toJalaali } from '@/utils/date-utils'
|
||||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.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 DashboardStatCard from '@/features/student/pages/components/DashboardStatCard.vue'
|
||||||
import DashboardCalendar from '@/features/student/pages/components/DashboardCalendar.vue'
|
import DashboardCalendar from '@/features/student/pages/components/DashboardCalendar.vue'
|
||||||
import DashboardProfileCard from '@/features/student/pages/components/DashboardProfileCard.vue'
|
import DashboardProfileCard from '@/features/student/pages/components/DashboardProfileCard.vue'
|
||||||
import DashboardActivityCard from '@/features/student/pages/components/DashboardActivityCard.vue'
|
import DashboardActivityCard from '@/features/student/pages/components/DashboardActivityCard.vue'
|
||||||
|
|
||||||
const performanceStats = [
|
const { data, isLoading } = useStudentDashboardQuery()
|
||||||
|
|
||||||
|
const dashboard = computed(() => data.value?.data ?? {})
|
||||||
|
|
||||||
|
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 performanceStats = computed(() => {
|
||||||
|
const stats = dashboard.value.stats ?? {}
|
||||||
|
return [
|
||||||
{
|
{
|
||||||
icon: 'clock',
|
icon: 'user-sound',
|
||||||
label: 'ساعات آموزشی سپریشده',
|
label: 'تعداد جلسات اعزام شده',
|
||||||
value: '۲۵',
|
value: toFaDigits(stats.attendedSessions ?? 0),
|
||||||
unit: 'ساعت',
|
unit: 'جلسه',
|
||||||
subtitle: 'گذرانده شده',
|
subtitle: 'اعزام شده است',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'video',
|
icon: 'video',
|
||||||
label: 'دوره های خریداری شده',
|
label: 'دوره های خریداری شده',
|
||||||
value: '۶',
|
value: toFaDigits(stats.enrolledTerms ?? 0),
|
||||||
unit: 'دوره',
|
unit: 'دوره',
|
||||||
subtitle: 'خریداری شده',
|
subtitle: 'خریداری شده',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'user-sound',
|
icon: 'clock',
|
||||||
label: 'تعداد جلسات اعزام شده',
|
label: 'ساعات آموزشی سپریشده',
|
||||||
value: '۱۲',
|
value: toFaDigits(stats.hoursSpent ?? 0),
|
||||||
unit: 'جلسه',
|
unit: 'ساعت',
|
||||||
subtitle: 'اعزام شده است',
|
subtitle: 'گذرانده شده',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
})
|
||||||
|
|
||||||
const activities = [
|
const activities = computed(() => {
|
||||||
{
|
const list = []
|
||||||
|
const course = dashboard.value.lastEnrolledCourse
|
||||||
|
if (course) {
|
||||||
|
list.push({
|
||||||
pillIcon: 'shopping-bag',
|
pillIcon: 'shopping-bag',
|
||||||
pillLabel: 'آخرین دوره خریداری شده',
|
pillLabel: 'آخرین دوره خریداری شده',
|
||||||
title: 'دوره تاریخچه ایران قدیم',
|
title: course.title,
|
||||||
metaIcon: 'calendar',
|
metaIcon: 'calendar',
|
||||||
meta: [
|
meta: [
|
||||||
{ label: 'تاریخ شروع:', value: '۱۴۰۰/۷/۱۹, ۸:۳۰', numeric: true },
|
{ label: 'تاریخ شروع:', value: formatMetaDateTime(course.startsAt), numeric: true },
|
||||||
{ label: 'استاد:', value: 'علیرضا حسنی' },
|
{ label: 'استاد:', value: course.teacher?.name ?? '' },
|
||||||
{ label: 'تاریخ پایان:', value: '۱۴۰۰/۱۱/۱۰, ۸:۳۰', numeric: true },
|
{ 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',
|
pillIcon: 'video',
|
||||||
pillLabel: 'اخرین جلسه دیده شده',
|
pillLabel: 'اخرین جلسه دیده شده',
|
||||||
title: 'دوره تخصصی تربیت مبلغ بین الملل',
|
title: session.courseTitle,
|
||||||
metaIcon: 'video',
|
metaIcon: 'video',
|
||||||
meta: [
|
meta: [
|
||||||
{ label: 'جلسه:', value: 'بیستم و دوم' },
|
{ label: 'جلسه:', value: sessionName },
|
||||||
{ label: 'استاد:', value: 'علیرضا حسنی' },
|
{ label: 'استاد:', value: session.teacher?.name ?? '' },
|
||||||
],
|
],
|
||||||
},
|
})
|
||||||
]
|
}
|
||||||
|
return list
|
||||||
|
})
|
||||||
|
|
||||||
const profile = {
|
const profile = computed(() => {
|
||||||
name: 'سید احمد علیزاده',
|
const info = dashboard.value.profile ?? {}
|
||||||
location: 'قم، ایران',
|
const stats = dashboard.value.stats ?? {}
|
||||||
|
return {
|
||||||
|
name: info.name ?? '',
|
||||||
|
avatarUrl: info.avatarUrl ?? '',
|
||||||
|
location: [info.city || info.province, 'ایران'].filter(Boolean).join('، '),
|
||||||
stats: [
|
stats: [
|
||||||
{ label: 'مدت عضویت', value: '۲۳', unit: 'روز' },
|
{ label: 'مدت عضویت', value: toFaDigits(info.membershipDays ?? 0), unit: 'روز' },
|
||||||
{ label: 'دورههای تکمیلشده', value: '۱۲', unit: 'عدد' },
|
{ label: 'دورههای تکمیلشده', value: toFaDigits(stats.completedCourses ?? 0), unit: 'عدد' },
|
||||||
{ label: 'دورههای فعال', value: '۵', 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 = {
|
const calendar = buildTehranCalendar()
|
||||||
month: 'شهریور ماه',
|
|
||||||
days: [
|
|
||||||
{ weekday: 'شنبه', day: '۱۵' },
|
|
||||||
{ weekday: 'یکشنبه', day: '۱۴' },
|
|
||||||
{ weekday: 'دوشنبه', day: '۱۳', marker: true },
|
|
||||||
{ weekday: 'سه شنبه', day: '۱۲' },
|
|
||||||
{ weekday: 'چهارشنبه', day: '۱۱', selected: true },
|
|
||||||
{ weekday: 'پنجشنبه', day: '۱۰' },
|
|
||||||
{ weekday: 'جمعه', day: '۹' },
|
|
||||||
],
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -60,6 +60,12 @@ const pageTitle = computed(() => route.meta?.title || 'مشاوره')
|
|||||||
const pageSubtitle = computed(() => route.meta?.subtitle || '')
|
const pageSubtitle = computed(() => route.meta?.subtitle || '')
|
||||||
|
|
||||||
const menuItems = computed(() => [
|
const menuItems = computed(() => [
|
||||||
|
{
|
||||||
|
title: 'پیشخوان',
|
||||||
|
icon: 'menu',
|
||||||
|
to: { name: 'counselor-dashboard' },
|
||||||
|
active: route.name === 'counselor-dashboard',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'مشاوره',
|
title: 'مشاوره',
|
||||||
icon: 'chat',
|
icon: 'chat',
|
||||||
|
|||||||
@@ -58,6 +58,12 @@ const pageTitle = computed(() => route.meta?.title || 'سیستم مدیریت
|
|||||||
const pageSubtitle = computed(() => route.meta?.subtitle || '')
|
const pageSubtitle = computed(() => route.meta?.subtitle || '')
|
||||||
|
|
||||||
const menuItems = computed(() => [
|
const menuItems = computed(() => [
|
||||||
|
{
|
||||||
|
title: 'پیشخوان',
|
||||||
|
icon: 'menu',
|
||||||
|
to: { name: 'missionary-dashboard' },
|
||||||
|
active: route.name === 'missionary-dashboard',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'سامانه اعزام',
|
title: 'سامانه اعزام',
|
||||||
icon: 'user-sound',
|
icon: 'user-sound',
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
import { http } from '@/services/api/http'
|
||||||
|
import { endpoints } from '@/services/api/endpoints'
|
||||||
|
|
||||||
|
export const apiGetAdminDashboard = () => http.get(endpoints.getAdminDashboard)
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
import { http } from '@/services/api/http'
|
||||||
|
import { endpoints } from '@/services/api/endpoints'
|
||||||
|
|
||||||
|
export const apiGetCounselorDashboard = () => http.get(endpoints.getCounselorDashboard)
|
||||||
@@ -28,6 +28,7 @@ export const endpoints = {
|
|||||||
// (/courses, /sessions/:id, /exams/:id, /exams/:id/submit) — the backend
|
// (/courses, /sessions/:id, /exams/:id, /exams/:id/submit) — the backend
|
||||||
// infers role from the auth token and scopes the response. Terms have a
|
// infers role from the auth token and scopes the response. Terms have a
|
||||||
// dedicated student route (returns the membership row with the nested term).
|
// dedicated student route (returns the membership row with the nested term).
|
||||||
|
getStudentDashboard: '/student/dashboard',
|
||||||
getStudentTerms: '/student/my-terms',
|
getStudentTerms: '/student/my-terms',
|
||||||
showStudentTerm: '/student/my-terms/:id',
|
showStudentTerm: '/student/my-terms/:id',
|
||||||
getStudentExamResults: '/student/exam-results',
|
getStudentExamResults: '/student/exam-results',
|
||||||
@@ -46,6 +47,12 @@ export const endpoints = {
|
|||||||
getStudentCertificates: '/student/certificates',
|
getStudentCertificates: '/student/certificates',
|
||||||
downloadStudentCertificate: '/student/certificates/:id/download',
|
downloadStudentCertificate: '/student/certificates/:id/download',
|
||||||
|
|
||||||
|
// ─── Per-role aggregated dashboards ────────────────────────────────────────
|
||||||
|
// Each requires the matching role's token; backend scopes the payload.
|
||||||
|
getAdminDashboard: '/admin/dashboard',
|
||||||
|
getCounselorDashboard: '/counselor/dashboard',
|
||||||
|
getMissionaryDashboard: '/missionary/dashboard',
|
||||||
|
|
||||||
// ─── Admin: users (out of scope of the Terms/Courses backend doc) ──────────
|
// ─── Admin: users (out of scope of the Terms/Courses backend doc) ──────────
|
||||||
getPendingStudents: '/admin/pending-students',
|
getPendingStudents: '/admin/pending-students',
|
||||||
showPendingStudent: '/admin/pending-students/:id',
|
showPendingStudent: '/admin/pending-students/:id',
|
||||||
|
|||||||
@@ -0,0 +1,4 @@
|
|||||||
|
import { http } from '@/services/api/http'
|
||||||
|
import { endpoints } from '@/services/api/endpoints'
|
||||||
|
|
||||||
|
export const apiGetMissionaryDashboard = () => http.get(endpoints.getMissionaryDashboard)
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
import { http } from '@/services/api/http'
|
||||||
|
import { endpoints } from '@/services/api/endpoints'
|
||||||
|
|
||||||
|
export const apiGetStudentDashboard = () => http.get(endpoints.getStudentDashboard)
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
export const adminDashboard = {
|
||||||
|
profile: {
|
||||||
|
id: 1,
|
||||||
|
name: 'سید احمد علیزاده',
|
||||||
|
avatarUrl: null,
|
||||||
|
province: 'قم',
|
||||||
|
city: 'قم',
|
||||||
|
role: 'admin',
|
||||||
|
roles: ['admin'],
|
||||||
|
accessLevel: 'full',
|
||||||
|
openTickets: 32,
|
||||||
|
},
|
||||||
|
stats: {
|
||||||
|
activeUsers: 11_000,
|
||||||
|
totalUsers: 11_540,
|
||||||
|
coursesCreated: 6,
|
||||||
|
coursesSold: 12,
|
||||||
|
},
|
||||||
|
recentRegistrations: [
|
||||||
|
{
|
||||||
|
id: 210,
|
||||||
|
name: 'علیرضا محمدی',
|
||||||
|
avatarUrl: null,
|
||||||
|
registeredAt: '2021-10-11T08:30:00+00:00',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
recentAdviseRequests: [
|
||||||
|
{
|
||||||
|
id: 88,
|
||||||
|
studentId: 205,
|
||||||
|
studentName: 'حسین رضایی',
|
||||||
|
subject: 'درخواست مشاوره',
|
||||||
|
createdAt: '2021-10-11T08:30:00+00:00',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
recentServiceRequests: [
|
||||||
|
{
|
||||||
|
id: 91,
|
||||||
|
studentId: 207,
|
||||||
|
studentName: 'پوریا محسنی',
|
||||||
|
subject: 'درخواست خدمات',
|
||||||
|
createdAt: '2021-10-11T08:30:00+00:00',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
export const counselorDashboard = {
|
||||||
|
profile: {
|
||||||
|
id: 6,
|
||||||
|
name: 'زهرا مشاور',
|
||||||
|
avatarUrl: null,
|
||||||
|
province: 'قم',
|
||||||
|
city: 'قم',
|
||||||
|
role: 'counselor',
|
||||||
|
membershipDays: 90,
|
||||||
|
},
|
||||||
|
stats: {
|
||||||
|
openTickets: 12,
|
||||||
|
answeredTickets: 8,
|
||||||
|
closedTickets: 40,
|
||||||
|
totalTickets: 60,
|
||||||
|
assignedToMe: 9,
|
||||||
|
},
|
||||||
|
recentTickets: [
|
||||||
|
{
|
||||||
|
id: 88,
|
||||||
|
studentId: 205,
|
||||||
|
studentName: 'حسین رضایی',
|
||||||
|
subject: 'درخواست مشاوره',
|
||||||
|
status: 'open',
|
||||||
|
createdAt: '2021-10-11T08:30:00+00:00',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
export const missionaryDashboard = {
|
||||||
|
profile: {
|
||||||
|
id: 14,
|
||||||
|
name: 'علی مبلغ',
|
||||||
|
avatarUrl: null,
|
||||||
|
province: 'قم',
|
||||||
|
city: 'قم',
|
||||||
|
role: 'missionary',
|
||||||
|
membershipDays: 120,
|
||||||
|
},
|
||||||
|
stats: {
|
||||||
|
totalRequests: 8,
|
||||||
|
pendingRequests: 2,
|
||||||
|
acceptedRequests: 5,
|
||||||
|
rejectedRequests: 1,
|
||||||
|
unassignedRequests: 3,
|
||||||
|
memoriesCount: 4,
|
||||||
|
completedTerms: 3,
|
||||||
|
},
|
||||||
|
recentRequests: [
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
title: 'جلسه مطالعه کتاب',
|
||||||
|
subject: 'مطالعه گروهی',
|
||||||
|
status: 'pending',
|
||||||
|
requesterName: 'احمد رضایی',
|
||||||
|
createdAt: '2021-10-11T08:30:00+00:00',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
recentMemories: [
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
title: 'اولین سفر تبلیغی',
|
||||||
|
createdAt: '2021-10-11T08:30:00+00:00',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
export const studentDashboard = {
|
||||||
|
profile: {
|
||||||
|
id: 5,
|
||||||
|
name: 'سید احمد علیزاده',
|
||||||
|
avatarUrl: null,
|
||||||
|
province: 'قم',
|
||||||
|
city: 'قم',
|
||||||
|
membershipDays: 23,
|
||||||
|
},
|
||||||
|
stats: {
|
||||||
|
hoursSpent: 25,
|
||||||
|
enrolledTerms: 6,
|
||||||
|
attendedSessions: 12,
|
||||||
|
completedCourses: 12,
|
||||||
|
activeCourses: 5,
|
||||||
|
},
|
||||||
|
lastEnrolledCourse: {
|
||||||
|
courseId: 18,
|
||||||
|
title: 'دوره تاریخچه ایران قدیم',
|
||||||
|
startsAt: '2021-10-11T08:30:00+00:00',
|
||||||
|
endsAt: '2022-02-04T08:30:00+00:00',
|
||||||
|
teacher: {
|
||||||
|
id: 1,
|
||||||
|
name: 'علیرضا حسینی',
|
||||||
|
avatarUrl: null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lastWatchedSession: {
|
||||||
|
sessionId: 42,
|
||||||
|
title: 'جلسه بیست و دوم',
|
||||||
|
sessionNumber: 22,
|
||||||
|
courseTitle: 'دوره تخصصی تربیت مبلغ بینالملل',
|
||||||
|
teacher: {
|
||||||
|
id: 1,
|
||||||
|
name: 'علیرضا حسینی',
|
||||||
|
},
|
||||||
|
watchedAt: '2021-10-11T08:30:00+00:00',
|
||||||
|
},
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { register } from '@/services/mock/registry'
|
||||||
|
import { endpoints } from '@/services/api/endpoints'
|
||||||
|
import { adminDashboard } from '@/services/mock/fixtures/admin-dashboard'
|
||||||
|
|
||||||
|
register('GET', endpoints.getAdminDashboard, () => ({ data: adminDashboard }))
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { register } from '@/services/mock/registry'
|
||||||
|
import { endpoints } from '@/services/api/endpoints'
|
||||||
|
import { counselorDashboard } from '@/services/mock/fixtures/counselor-dashboard'
|
||||||
|
|
||||||
|
register('GET', endpoints.getCounselorDashboard, () => ({ data: counselorDashboard }))
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { register } from '@/services/mock/registry'
|
||||||
|
import { endpoints } from '@/services/api/endpoints'
|
||||||
|
import { missionaryDashboard } from '@/services/mock/fixtures/missionary-dashboard'
|
||||||
|
|
||||||
|
register('GET', endpoints.getMissionaryDashboard, () => ({ data: missionaryDashboard }))
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { register } from '@/services/mock/registry'
|
||||||
|
import { endpoints } from '@/services/api/endpoints'
|
||||||
|
import { studentDashboard } from '@/services/mock/fixtures/student-dashboard'
|
||||||
|
|
||||||
|
register('GET', endpoints.getStudentDashboard, () => ({ data: studentDashboard }))
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { useQuery } from '@tanstack/vue-query'
|
||||||
|
import { apiGetAdminDashboard } from '@/services/api/admin-dashboard'
|
||||||
|
|
||||||
|
export const adminDashboardKeys = {
|
||||||
|
all: ['admin', 'dashboard'],
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useAdminDashboardQuery = (options = {}) =>
|
||||||
|
useQuery({
|
||||||
|
queryKey: adminDashboardKeys.all,
|
||||||
|
queryFn: apiGetAdminDashboard,
|
||||||
|
...options,
|
||||||
|
})
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { useQuery } from '@tanstack/vue-query'
|
||||||
|
import { apiGetCounselorDashboard } from '@/services/api/counselor-dashboard'
|
||||||
|
|
||||||
|
export const counselorDashboardKeys = {
|
||||||
|
all: ['counselor', 'dashboard'],
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useCounselorDashboardQuery = (options = {}) =>
|
||||||
|
useQuery({
|
||||||
|
queryKey: counselorDashboardKeys.all,
|
||||||
|
queryFn: apiGetCounselorDashboard,
|
||||||
|
...options,
|
||||||
|
})
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { useQuery } from '@tanstack/vue-query'
|
||||||
|
import { apiGetMissionaryDashboard } from '@/services/api/missionary-dashboard'
|
||||||
|
|
||||||
|
export const missionaryDashboardKeys = {
|
||||||
|
all: ['missionary', 'dashboard'],
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useMissionaryDashboardQuery = (options = {}) =>
|
||||||
|
useQuery({
|
||||||
|
queryKey: missionaryDashboardKeys.all,
|
||||||
|
queryFn: apiGetMissionaryDashboard,
|
||||||
|
...options,
|
||||||
|
})
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { useQuery } from '@tanstack/vue-query'
|
||||||
|
import { apiGetStudentDashboard } from '@/services/api/student-dashboard'
|
||||||
|
|
||||||
|
export const studentDashboardKeys = {
|
||||||
|
all: ['student', 'dashboard'],
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useStudentDashboardQuery = (options = {}) =>
|
||||||
|
useQuery({
|
||||||
|
queryKey: studentDashboardKeys.all,
|
||||||
|
queryFn: apiGetStudentDashboard,
|
||||||
|
...options,
|
||||||
|
})
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import { toJalaali } from '@/utils/date-utils'
|
||||||
|
|
||||||
|
const FA_DIGITS = '۰۱۲۳۴۵۶۷۸۹'
|
||||||
|
|
||||||
|
export const toFaDigits = (value) => String(value ?? '').replace(/\d/g, (d) => FA_DIGITS[d])
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats an ISO timestamp as a compact Jalaali meta line — "۱۴۰۰/۷/۱۹, ۸:۳۰".
|
||||||
|
* Reads the wall-clock date/time from the string as-is (no timezone shift), so
|
||||||
|
* the value mirrors what the backend recorded.
|
||||||
|
*/
|
||||||
|
export const formatJalaaliMeta = (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]}`)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user