From b592f520aba10e72e5461d711bac9c0b3c7b608e Mon Sep 17 00:00:00 2001
From: sajjadtalkhabi <97734061+sajjadtalkhabi@users.noreply.github.com>
Date: Sun, 12 Jul 2026 12:03:26 +0330
Subject: [PATCH] fix: dashboard

---
 .../dashboard/DashboardActivityCard.vue       | 143 ++++++++++
 .../dashboard/DashboardActivityGroup.vue      |  65 +++++
 .../dashboard/DashboardCalendar.vue           |  99 +++++++
 .../dashboard/DashboardProfileCard.vue        | 134 +++++++++
 .../dashboard/DashboardStatCard.vue           | 108 +++++++
 src/composables/useTehranCalendar.js          |  50 ++++
 src/enums/index.js                            |   4 +-
 .../admin/pages/AdminDashboardPage.vue        | 269 +++++++++++++++---
 .../pages/CounselorDashboardPage.vue          | 212 ++++++++++++++
 src/features/counselor/router.js              |  11 +
 .../pages/MissionaryDashboardPage.vue         | 231 +++++++++++++++
 src/features/missionary/router.js             |  11 +
 .../student/pages/StudentDashboardPage.vue    | 206 +++++++++-----
 src/layouts/CounselorLayout.vue               |   6 +
 src/layouts/MissionaryLayout.vue              |   6 +
 src/services/api/admin-dashboard.js           |   4 +
 src/services/api/counselor-dashboard.js       |   4 +
 src/services/api/endpoints.js                 |   7 +
 src/services/api/missionary-dashboard.js      |   4 +
 src/services/api/student-dashboard.js         |   4 +
 src/services/mock/fixtures/admin-dashboard.js |  45 +++
 .../mock/fixtures/counselor-dashboard.js      |  28 ++
 .../mock/fixtures/missionary-dashboard.js     |  37 +++
 .../mock/fixtures/student-dashboard.js        |  39 +++
 src/services/mock/routes/admin-dashboard.js   |   5 +
 .../mock/routes/counselor-dashboard.js        |   5 +
 .../mock/routes/missionary-dashboard.js       |   5 +
 src/services/mock/routes/student-dashboard.js |   5 +
 src/services/query/admin-dashboard.js         |  13 +
 src/services/query/counselor-dashboard.js     |  13 +
 src/services/query/missionary-dashboard.js    |  13 +
 src/services/query/student-dashboard.js       |  13 +
 src/utils/persian.js                          |  17 ++
 33 files changed, 1714 insertions(+), 102 deletions(-)
 create mode 100644 src/components/dashboard/DashboardActivityCard.vue
 create mode 100644 src/components/dashboard/DashboardActivityGroup.vue
 create mode 100644 src/components/dashboard/DashboardCalendar.vue
 create mode 100644 src/components/dashboard/DashboardProfileCard.vue
 create mode 100644 src/components/dashboard/DashboardStatCard.vue
 create mode 100644 src/composables/useTehranCalendar.js
 create mode 100644 src/features/counselor/pages/CounselorDashboardPage.vue
 create mode 100644 src/features/missionary/pages/MissionaryDashboardPage.vue
 create mode 100644 src/services/api/admin-dashboard.js
 create mode 100644 src/services/api/counselor-dashboard.js
 create mode 100644 src/services/api/missionary-dashboard.js
 create mode 100644 src/services/api/student-dashboard.js
 create mode 100644 src/services/mock/fixtures/admin-dashboard.js
 create mode 100644 src/services/mock/fixtures/counselor-dashboard.js
 create mode 100644 src/services/mock/fixtures/missionary-dashboard.js
 create mode 100644 src/services/mock/fixtures/student-dashboard.js
 create mode 100644 src/services/mock/routes/admin-dashboard.js
 create mode 100644 src/services/mock/routes/counselor-dashboard.js
 create mode 100644 src/services/mock/routes/missionary-dashboard.js
 create mode 100644 src/services/mock/routes/student-dashboard.js
 create mode 100644 src/services/query/admin-dashboard.js
 create mode 100644 src/services/query/counselor-dashboard.js
 create mode 100644 src/services/query/missionary-dashboard.js
 create mode 100644 src/services/query/student-dashboard.js
 create mode 100644 src/utils/persian.js

diff --git a/src/components/dashboard/DashboardActivityCard.vue b/src/components/dashboard/DashboardActivityCard.vue
new file mode 100644
index 0000000..246d715
--- /dev/null
+++ b/src/components/dashboard/DashboardActivityCard.vue
@@ -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>
diff --git a/src/components/dashboard/DashboardActivityGroup.vue b/src/components/dashboard/DashboardActivityGroup.vue
new file mode 100644
index 0000000..5fc032d
--- /dev/null
+++ b/src/components/dashboard/DashboardActivityGroup.vue
@@ -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>
diff --git a/src/components/dashboard/DashboardCalendar.vue b/src/components/dashboard/DashboardCalendar.vue
new file mode 100644
index 0000000..0a1de64
--- /dev/null
+++ b/src/components/dashboard/DashboardCalendar.vue
@@ -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>
diff --git a/src/components/dashboard/DashboardProfileCard.vue b/src/components/dashboard/DashboardProfileCard.vue
new file mode 100644
index 0000000..5c015ea
--- /dev/null
+++ b/src/components/dashboard/DashboardProfileCard.vue
@@ -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>
diff --git a/src/components/dashboard/DashboardStatCard.vue b/src/components/dashboard/DashboardStatCard.vue
new file mode 100644
index 0000000..02ce94b
--- /dev/null
+++ b/src/components/dashboard/DashboardStatCard.vue
@@ -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>
diff --git a/src/composables/useTehranCalendar.js b/src/composables/useTehranCalendar.js
new file mode 100644
index 0000000..75fbe7c
--- /dev/null
+++ b/src/composables/useTehranCalendar.js
@@ -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 }
+}
diff --git a/src/enums/index.js b/src/enums/index.js
index 3453321..a6b33b9 100644
--- a/src/enums/index.js
+++ b/src/enums/index.js
@@ -220,6 +220,6 @@ export const MISSIONARY_REQUEST_STATUS = Object.freeze({
 // page. Roles not listed here fall back to the student dashboard.
 export const ROLE_HOME_ROUTES = Object.freeze({
   admin: 'admin-dashboard',
-  counselor: 'counselor-consultations',
-  missionary: 'missionary-requests',
+  counselor: 'counselor-dashboard',
+  missionary: 'missionary-dashboard',
 })
diff --git a/src/features/admin/pages/AdminDashboardPage.vue b/src/features/admin/pages/AdminDashboardPage.vue
index 7506380..d27d0ee 100644
--- a/src/features/admin/pages/AdminDashboardPage.vue
+++ b/src/features/admin/pages/AdminDashboardPage.vue
@@ -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>
diff --git a/src/features/counselor/pages/CounselorDashboardPage.vue b/src/features/counselor/pages/CounselorDashboardPage.vue
new file mode 100644
index 0000000..72ed559
--- /dev/null
+++ b/src/features/counselor/pages/CounselorDashboardPage.vue
@@ -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>
diff --git a/src/features/counselor/router.js b/src/features/counselor/router.js
index c00f272..66bf8f2 100644
--- a/src/features/counselor/router.js
+++ b/src/features/counselor/router.js
@@ -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',
diff --git a/src/features/missionary/pages/MissionaryDashboardPage.vue b/src/features/missionary/pages/MissionaryDashboardPage.vue
new file mode 100644
index 0000000..c2d1613
--- /dev/null
+++ b/src/features/missionary/pages/MissionaryDashboardPage.vue
@@ -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>
diff --git a/src/features/missionary/router.js b/src/features/missionary/router.js
index c9a7ed5..4a1b7dc 100644
--- a/src/features/missionary/router.js
+++ b/src/features/missionary/router.js
@@ -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',
diff --git a/src/features/student/pages/StudentDashboardPage.vue b/src/features/student/pages/StudentDashboardPage.vue
index 9801ed7..71a1d14 100644
--- a/src/features/student/pages/StudentDashboardPage.vue
+++ b/src/features/student/pages/StudentDashboardPage.vue
@@ -9,7 +9,8 @@
           </template>
         </BoxedIconTitleBlock>
 
-        <div class="dashboard__stats">
+        <SkeletonLoaderBlock v-if="isLoading" :rows="1" :cols-per-row="3" />
+        <div v-else class="dashboard__stats">
           <DashboardStatCard
             v-for="(stat, i) in performanceStats"
             :key="i"
@@ -33,7 +34,8 @@
           </template>
         </BoxedIconTitleBlock>
 
-        <div class="dashboard__activities">
+        <SkeletonLoaderBlock v-if="isLoading" :rows="2" :cols-per-row="2" />
+        <div v-else class="dashboard__activities">
           <div v-for="(act, i) in activities" :key="i" class="dashboard__activity">
             <div class="dashboard__pill">
               <SvgIcon :name="act.pillIcon" :size="'1.125rem'" class="dashboard__pill-icon" />
@@ -46,9 +48,12 @@
     </div>
 
     <aside class="dashboard__aside">
+      <SkeletonLoaderBlock v-if="isLoading" :rows="2" :cols-per-row="1" />
       <DashboardProfileCard
+        v-else
         :name="profile.name"
         :location="profile.location"
+        :avatar-url="profile.avatarUrl"
         :stats="profile.stats"
       />
       <DashboardCalendar :month-label="calendar.month" :days="calendar.days" />
@@ -57,83 +62,150 @@
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { toJalaali } from '@/utils/date-utils'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
+import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
+import { useStudentDashboardQuery } from '@/services/query/student-dashboard'
 import DashboardStatCard from '@/features/student/pages/components/DashboardStatCard.vue'
 import DashboardCalendar from '@/features/student/pages/components/DashboardCalendar.vue'
 import DashboardProfileCard from '@/features/student/pages/components/DashboardProfileCard.vue'
 import DashboardActivityCard from '@/features/student/pages/components/DashboardActivityCard.vue'
 
-const performanceStats = [
-  {
-    icon: 'clock',
-    label: 'ساعات آموزشی سپری‌شده',
-    value: '۲۵',
-    unit: 'ساعت',
-    subtitle: 'گذرانده شده',
-  },
-  {
-    icon: 'video',
-    label: 'دوره های خریداری شده',
-    value: '۶',
-    unit: 'دوره',
-    subtitle: 'خریداری شده',
-  },
-  {
-    icon: 'user-sound',
-    label: 'تعداد جلسات اعزام شده',
-    value: '۱۲',
-    unit: 'جلسه',
-    subtitle: 'اعزام شده است',
-  },
-]
+const { data, isLoading } = useStudentDashboardQuery()
 
-const activities = [
-  {
-    pillIcon: 'shopping-bag',
-    pillLabel: 'آخرین دوره خریداری شده',
-    title: 'دوره تاریخچه ایران قدیم',
-    metaIcon: 'calendar',
-    meta: [
-      { label: 'تاریخ شروع:', value: '۱۴۰۰/۷/۱۹, ۸:۳۰', numeric: true },
-      { label: 'استاد:', value: 'علیرضا حسنی' },
-      { label: 'تاریخ پایان:', value: '۱۴۰۰/۱۱/۱۰, ۸:۳۰', numeric: true },
-    ],
-  },
-  {
-    pillIcon: 'video',
-    pillLabel: 'اخرین جلسه دیده شده',
-    title: 'دوره تخصصی تربیت مبلغ بین الملل',
-    metaIcon: 'video',
-    meta: [
-      { label: 'جلسه:', value: 'بیستم و دوم' },
-      { label: 'استاد:', value: 'علیرضا حسنی' },
-    ],
-  },
-]
+const dashboard = computed(() => data.value?.data ?? {})
 
-const profile = {
-  name: 'سید احمد علیزاده',
-  location: 'قم، ایران',
-  stats: [
-    { label: 'مدت عضویت', value: '۲۳', unit: 'روز' },
-    { label: 'دوره‌های تکمیل‌شده', value: '۱۲', unit: 'عدد' },
-    { label: 'دوره‌های فعال', value: '۵', unit: 'عدد' },
-  ],
+const toFaDigits = (value) => String(value ?? '').replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
+
+const formatMetaDateTime = (iso) => {
+  const match = String(iso ?? '').match(/^(\d{4})-(\d{2})-(\d{2})[\sT](\d{2}):(\d{2})/)
+  if (!match) return ''
+  const { jy, jm, jd } = toJalaali(Number(match[1]), Number(match[2]), Number(match[3]))
+  return toFaDigits(`${jy}/${jm}/${jd}, ${Number(match[4])}:${match[5]}`)
 }
 
-const calendar = {
-  month: 'شهریور ماه',
-  days: [
-    { weekday: 'شنبه', day: '۱۵' },
-    { weekday: 'یکشنبه', day: '۱۴' },
-    { weekday: 'دوشنبه', day: '۱۳', marker: true },
-    { weekday: 'سه شنبه', day: '۱۲' },
-    { weekday: 'چهارشنبه', day: '۱۱', selected: true },
-    { weekday: 'پنجشنبه', day: '۱۰' },
-    { weekday: 'جمعه', day: '۹' },
-  ],
+const performanceStats = computed(() => {
+  const stats = dashboard.value.stats ?? {}
+  return [
+    {
+      icon: 'user-sound',
+      label: 'تعداد جلسات اعزام شده',
+      value: toFaDigits(stats.attendedSessions ?? 0),
+      unit: 'جلسه',
+      subtitle: 'اعزام شده است',
+    },
+    {
+      icon: 'video',
+      label: 'دوره های خریداری شده',
+      value: toFaDigits(stats.enrolledTerms ?? 0),
+      unit: 'دوره',
+      subtitle: 'خریداری شده',
+    },
+    {
+      icon: 'clock',
+      label: 'ساعات آموزشی سپری‌شده',
+      value: toFaDigits(stats.hoursSpent ?? 0),
+      unit: 'ساعت',
+      subtitle: 'گذرانده شده',
+    },
+  ]
+})
+
+const activities = computed(() => {
+  const list = []
+  const course = dashboard.value.lastEnrolledCourse
+  if (course) {
+    list.push({
+      pillIcon: 'shopping-bag',
+      pillLabel: 'آخرین دوره خریداری شده',
+      title: course.title,
+      metaIcon: 'calendar',
+      meta: [
+        { label: 'تاریخ شروع:', value: formatMetaDateTime(course.startsAt), numeric: true },
+        { label: 'استاد:', value: course.teacher?.name ?? '' },
+        { label: 'تاریخ پایان:', value: formatMetaDateTime(course.endsAt), numeric: true },
+      ],
+    })
+  }
+  const session = dashboard.value.lastWatchedSession
+  if (session) {
+    const sessionName =
+      session.title?.replace(/^جلسه\s*/u, '') || toFaDigits(session.sessionNumber ?? '')
+    list.push({
+      pillIcon: 'video',
+      pillLabel: 'اخرین جلسه دیده شده',
+      title: session.courseTitle,
+      metaIcon: 'video',
+      meta: [
+        { label: 'جلسه:', value: sessionName },
+        { label: 'استاد:', value: session.teacher?.name ?? '' },
+      ],
+    })
+  }
+  return list
+})
+
+const profile = computed(() => {
+  const info = dashboard.value.profile ?? {}
+  const stats = dashboard.value.stats ?? {}
+  return {
+    name: info.name ?? '',
+    avatarUrl: info.avatarUrl ?? '',
+    location: [info.city || info.province, 'ایران'].filter(Boolean).join('، '),
+    stats: [
+      { label: 'مدت عضویت', value: toFaDigits(info.membershipDays ?? 0), unit: 'روز' },
+      { label: 'دوره‌های تکمیل‌شده', value: toFaDigits(stats.completedCourses ?? 0), unit: 'عدد' },
+      { label: 'دوره‌های فعال', value: toFaDigits(stats.activeCourses ?? 0), unit: 'عدد' },
+    ],
+  }
+})
+
+const WEEKDAY_NAMES = ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه']
+const MONTH_NAMES = [
+  'فروردین',
+  'اردیبهشت',
+  'خرداد',
+  'تیر',
+  'مرداد',
+  'شهریور',
+  'مهر',
+  'آبان',
+  'آذر',
+  'دی',
+  'بهمن',
+  'اسفند',
+]
+const GREGORIAN_WEEKDAYS = ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri']
+const DAY_MS = 24 * 60 * 60 * 1000
+
+const buildTehranCalendar = () => {
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'Asia/Tehran',
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    weekday: 'short',
+  }).formatToParts(new Date())
+  const part = (type) => parts.find((p) => p.type === type)?.value
+  const todayIndex = GREGORIAN_WEEKDAYS.indexOf(part('weekday'))
+  const todayUtc = Date.UTC(Number(part('year')), Number(part('month')) - 1, Number(part('day')))
+  const weekStartUtc = todayUtc - todayIndex * DAY_MS
+
+  const today = new Date(todayUtc)
+  const { jm } = toJalaali(today.getUTCFullYear(), today.getUTCMonth() + 1, today.getUTCDate())
+
+  const days = WEEKDAY_NAMES.map((weekday, i) => {
+    const date = new Date(weekStartUtc + i * DAY_MS)
+    const { jd } = toJalaali(date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate())
+    return { weekday, day: toFaDigits(jd), selected: i === todayIndex }
+  })
+
+  return { month: `${MONTH_NAMES[jm - 1]} ماه`, days }
 }
+
+const calendar = buildTehranCalendar()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layouts/CounselorLayout.vue b/src/layouts/CounselorLayout.vue
index c9dfaa9..148d54a 100644
--- a/src/layouts/CounselorLayout.vue
+++ b/src/layouts/CounselorLayout.vue
@@ -60,6 +60,12 @@ const pageTitle = computed(() => route.meta?.title || 'مشاوره')
 const pageSubtitle = computed(() => route.meta?.subtitle || '')
 
 const menuItems = computed(() => [
+  {
+    title: 'پیشخوان',
+    icon: 'menu',
+    to: { name: 'counselor-dashboard' },
+    active: route.name === 'counselor-dashboard',
+  },
   {
     title: 'مشاوره',
     icon: 'chat',
diff --git a/src/layouts/MissionaryLayout.vue b/src/layouts/MissionaryLayout.vue
index 6ce9967..fd81849 100644
--- a/src/layouts/MissionaryLayout.vue
+++ b/src/layouts/MissionaryLayout.vue
@@ -58,6 +58,12 @@ const pageTitle = computed(() => route.meta?.title || 'سیستم مدیریت 
 const pageSubtitle = computed(() => route.meta?.subtitle || '')
 
 const menuItems = computed(() => [
+  {
+    title: 'پیشخوان',
+    icon: 'menu',
+    to: { name: 'missionary-dashboard' },
+    active: route.name === 'missionary-dashboard',
+  },
   {
     title: 'سامانه اعزام',
     icon: 'user-sound',
diff --git a/src/services/api/admin-dashboard.js b/src/services/api/admin-dashboard.js
new file mode 100644
index 0000000..7ea5eec
--- /dev/null
+++ b/src/services/api/admin-dashboard.js
@@ -0,0 +1,4 @@
+import { http } from '@/services/api/http'
+import { endpoints } from '@/services/api/endpoints'
+
+export const apiGetAdminDashboard = () => http.get(endpoints.getAdminDashboard)
diff --git a/src/services/api/counselor-dashboard.js b/src/services/api/counselor-dashboard.js
new file mode 100644
index 0000000..fe4c2a5
--- /dev/null
+++ b/src/services/api/counselor-dashboard.js
@@ -0,0 +1,4 @@
+import { http } from '@/services/api/http'
+import { endpoints } from '@/services/api/endpoints'
+
+export const apiGetCounselorDashboard = () => http.get(endpoints.getCounselorDashboard)
diff --git a/src/services/api/endpoints.js b/src/services/api/endpoints.js
index ca34790..ad280b8 100644
--- a/src/services/api/endpoints.js
+++ b/src/services/api/endpoints.js
@@ -28,6 +28,7 @@ export const endpoints = {
   // (/courses, /sessions/:id, /exams/:id, /exams/:id/submit) — the backend
   // infers role from the auth token and scopes the response. Terms have a
   // dedicated student route (returns the membership row with the nested term).
+  getStudentDashboard: '/student/dashboard',
   getStudentTerms: '/student/my-terms',
   showStudentTerm: '/student/my-terms/:id',
   getStudentExamResults: '/student/exam-results',
@@ -46,6 +47,12 @@ export const endpoints = {
   getStudentCertificates: '/student/certificates',
   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) ──────────
   getPendingStudents: '/admin/pending-students',
   showPendingStudent: '/admin/pending-students/:id',
diff --git a/src/services/api/missionary-dashboard.js b/src/services/api/missionary-dashboard.js
new file mode 100644
index 0000000..8124c12
--- /dev/null
+++ b/src/services/api/missionary-dashboard.js
@@ -0,0 +1,4 @@
+import { http } from '@/services/api/http'
+import { endpoints } from '@/services/api/endpoints'
+
+export const apiGetMissionaryDashboard = () => http.get(endpoints.getMissionaryDashboard)
diff --git a/src/services/api/student-dashboard.js b/src/services/api/student-dashboard.js
new file mode 100644
index 0000000..4497b95
--- /dev/null
+++ b/src/services/api/student-dashboard.js
@@ -0,0 +1,4 @@
+import { http } from '@/services/api/http'
+import { endpoints } from '@/services/api/endpoints'
+
+export const apiGetStudentDashboard = () => http.get(endpoints.getStudentDashboard)
diff --git a/src/services/mock/fixtures/admin-dashboard.js b/src/services/mock/fixtures/admin-dashboard.js
new file mode 100644
index 0000000..a37164c
--- /dev/null
+++ b/src/services/mock/fixtures/admin-dashboard.js
@@ -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',
+    },
+  ],
+}
diff --git a/src/services/mock/fixtures/counselor-dashboard.js b/src/services/mock/fixtures/counselor-dashboard.js
new file mode 100644
index 0000000..780ac2d
--- /dev/null
+++ b/src/services/mock/fixtures/counselor-dashboard.js
@@ -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',
+    },
+  ],
+}
diff --git a/src/services/mock/fixtures/missionary-dashboard.js b/src/services/mock/fixtures/missionary-dashboard.js
new file mode 100644
index 0000000..a121d67
--- /dev/null
+++ b/src/services/mock/fixtures/missionary-dashboard.js
@@ -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',
+    },
+  ],
+}
diff --git a/src/services/mock/fixtures/student-dashboard.js b/src/services/mock/fixtures/student-dashboard.js
new file mode 100644
index 0000000..1a5d594
--- /dev/null
+++ b/src/services/mock/fixtures/student-dashboard.js
@@ -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',
+  },
+}
diff --git a/src/services/mock/routes/admin-dashboard.js b/src/services/mock/routes/admin-dashboard.js
new file mode 100644
index 0000000..0bca5d0
--- /dev/null
+++ b/src/services/mock/routes/admin-dashboard.js
@@ -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 }))
diff --git a/src/services/mock/routes/counselor-dashboard.js b/src/services/mock/routes/counselor-dashboard.js
new file mode 100644
index 0000000..3b1218b
--- /dev/null
+++ b/src/services/mock/routes/counselor-dashboard.js
@@ -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 }))
diff --git a/src/services/mock/routes/missionary-dashboard.js b/src/services/mock/routes/missionary-dashboard.js
new file mode 100644
index 0000000..ea7c98c
--- /dev/null
+++ b/src/services/mock/routes/missionary-dashboard.js
@@ -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 }))
diff --git a/src/services/mock/routes/student-dashboard.js b/src/services/mock/routes/student-dashboard.js
new file mode 100644
index 0000000..99f440a
--- /dev/null
+++ b/src/services/mock/routes/student-dashboard.js
@@ -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 }))
diff --git a/src/services/query/admin-dashboard.js b/src/services/query/admin-dashboard.js
new file mode 100644
index 0000000..c304da8
--- /dev/null
+++ b/src/services/query/admin-dashboard.js
@@ -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,
+  })
diff --git a/src/services/query/counselor-dashboard.js b/src/services/query/counselor-dashboard.js
new file mode 100644
index 0000000..2c74638
--- /dev/null
+++ b/src/services/query/counselor-dashboard.js
@@ -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,
+  })
diff --git a/src/services/query/missionary-dashboard.js b/src/services/query/missionary-dashboard.js
new file mode 100644
index 0000000..db0193c
--- /dev/null
+++ b/src/services/query/missionary-dashboard.js
@@ -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,
+  })
diff --git a/src/services/query/student-dashboard.js b/src/services/query/student-dashboard.js
new file mode 100644
index 0000000..4b11d4a
--- /dev/null
+++ b/src/services/query/student-dashboard.js
@@ -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,
+  })
diff --git a/src/utils/persian.js b/src/utils/persian.js
new file mode 100644
index 0000000..4d5aa5a
--- /dev/null
+++ b/src/utils/persian.js
@@ -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]}`)
+}