first commit

2026-05-13 01:43:05 +03:30
commit d2a577f254
297 changed files with 36274 additions and 0 deletions
@@ -0,0 +1,141 @@
+<template>
+  <form class="users-filters" @submit.prevent="onSubmit">
+    <div class="users-filters__grid">
+      <TextField v-model="form.name" name="name" label="جستجو اسم کاربر">
+        <template #appendIcon>
+          <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
+        </template>
+      </TextField>
+      <SelectField
+        v-model="form.roleId"
+        name="roleId"
+        label="نقش کاربر"
+        :options="roleOptions"
+        option-label="label"
+        option-value="id"
+      />
+      <TextField
+        v-model="form.nationalCode"
+        name="nationalCode"
+        label="کد ملی کاربر"
+        inputmode="numeric"
+        :convert-digits="true"
+      >
+        <template #appendIcon>
+          <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
+        </template>
+      </TextField>
+      <TextField
+        v-model="form.phoneNumber"
+        name="phoneNumber"
+        label="شماره همراه کاربر"
+        inputmode="numeric"
+        :convert-digits="true"
+      >
+        <template #appendIcon>
+          <SvgIcon name="phone" :size="20" color="var(--color-thd-gray)" />
+        </template>
+      </TextField>
+    </div>
+
+    <div class="users-filters__actions">
+      <CircleButton
+        v-if="hasFilters"
+        tooltip="حذف فیلتر"
+        bg-color="transparent"
+        size="2.5rem"
+        type="button"
+        @click="onReset"
+      >
+        <template #icon>
+          <SvgIcon name="close" :size="20" />
+        </template>
+      </CircleButton>
+      <CircleButton
+        tooltip="اعمال فیلتر"
+        bg-color="rgba(104, 104, 104, 0.05)"
+        size="2.5rem"
+        type="submit"
+      >
+        <template #icon>
+          <SvgIcon name="funnel" :size="20" color="var(--color-error)" />
+        </template>
+      </CircleButton>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+import TextField from '@/components/form/TextField.vue'
+import SelectField from '@/components/form/SelectField.vue'
+import CircleButton from '@/components/CircleButton.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import { useAdminRolesListQuery } from '@/services/query/admin-users'
+import { ROLE_LABELS } from '@/enums'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({ name: '', nationalCode: '', phoneNumber: '', roleId: '' }),
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'apply', 'reset'])
+
+const form = ref({ ...props.modelValue })
+watch(
+  () => props.modelValue,
+  (next) => {
+    form.value = { ...next }
+  },
+  { deep: true }
+)
+
+const { data: roles = ref([]) } = useAdminRolesListQuery()
+const roleOptions = computed(() =>
+  (roles.value ?? []).map((r) => ({ ...r, label: ROLE_LABELS[r.name] || r.name }))
+)
+
+const hasFilters = computed(() =>
+  Object.values(form.value).some((v) => v !== '' && v !== null && v !== undefined)
+)
+
+const onSubmit = () => {
+  emit('update:modelValue', { ...form.value })
+  emit('apply', { ...form.value })
+}
+
+const onReset = () => {
+  form.value = { name: '', nationalCode: '', phoneNumber: '', roleId: '' }
+  emit('update:modelValue', { ...form.value })
+  emit('reset')
+}
+</script>
+
+<style lang="scss" scoped>
+.users-filters {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+
+  &__grid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding-top: 1.75rem;
+  }
+}
+</style>
@@ -0,0 +1,366 @@
+<template>
+  <div class="users-table">
+    <div v-for="user in users" :key="user.id" class="users-table__row">
+      <div class="users-table__avatar">
+        <img v-if="user.avatarUrl" :src="user.avatarUrl" :alt="fullName(user)" />
+        <SvgIcon v-else name="user" :size="36" color="#cbd5e1" />
+      </div>
+      <div class="users-table__info">
+        <p class="users-table__name">{{ fullName(user) || '—' }}</p>
+        <div class="users-table__meta">
+          <span v-if="user.phoneNumber">{{ user.phoneNumber }}</span>
+          <span v-if="user.nationalCode" class="users-table__sep">|</span>
+          <span v-if="user.nationalCode">کد ملی: {{ user.nationalCode }}</span>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="users-table__role-badge"
+        :class="`users-table__role-badge--${roleName(user) || 'unknown'}`"
+        :disabled="updateRoleMutation.isPending.value && activeUser?.id === user.id"
+        @click="onRoleClick($event, user)"
+      >
+        <span class="users-table__role-dot" />
+        <span>{{ roleLabel(user) || 'بدون نقش' }}</span>
+        <SvgIcon name="caret-down" :size="12" color="currentColor" />
+      </button>
+
+      <div class="users-table__actions">
+        <button
+          type="button"
+          class="users-table__more"
+          aria-label="گزینه‌های بیشتر"
+          @click="onMoreClick($event, user)"
+        >
+          <span class="users-table__more-dot" />
+          <span class="users-table__more-dot" />
+          <span class="users-table__more-dot" />
+        </button>
+        <BaseButton
+          text="جزئیات کاربر"
+          custom-class="users-table__details-btn"
+          @click="emit('show-details', user)"
+        >
+          <template #appendIcon>
+            <SvgIcon name="caret-left" :size="16" color="#fff" />
+          </template>
+        </BaseButton>
+      </div>
+    </div>
+
+    <DropdownMenu
+      v-model="menuOpen"
+      :reference="menuTrigger"
+      :items="menuItems"
+      placement="bottom-end"
+    />
+
+    <DropdownMenu
+      v-model="roleMenuOpen"
+      :reference="roleMenuTrigger"
+      :items="roleMenuItems"
+      placement="bottom-end"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useQueryClient } from '@tanstack/vue-query'
+
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import DropdownMenu from '@/components/DropdownMenu.vue'
+import { CHANGEABLE_ROLES, ROLE_LABELS } from '@/enums'
+import BaseButton from '@/components/BaseButton.vue'
+import {
+  adminUsersKeys,
+  useAdminRolesListQuery,
+  useUpdateAdminUserRoleMutation,
+} from '@/services/query/admin-users'
+
+defineProps({
+  users: { type: Array, required: true },
+})
+
+const queryClient = useQueryClient()
+
+const emit = defineEmits([
+  'edit',
+  'delete',
+  'block',
+  'show-details',
+  'show-assignments',
+  'show-exams',
+  'export-pdf',
+])
+
+const fullName = (user) => `${user.firstName || ''} ${user.lastName || ''}`.trim()
+
+const roleName = (user) => {
+  const first = user.roles?.[0]
+  return typeof first === 'string' ? first : first?.name
+}
+
+const roleLabel = (user) => {
+  const name = roleName(user)
+  return name ? ROLE_LABELS[name] || name : ''
+}
+
+const menuOpen = ref(false)
+const menuTrigger = ref(null)
+const activeUser = ref(null)
+
+const onMoreClick = (event, user) => {
+  const trigger = event.currentTarget
+  if (menuOpen.value && menuTrigger.value === trigger) {
+    menuOpen.value = false
+    return
+  }
+  activeUser.value = user
+  menuTrigger.value = trigger
+  menuOpen.value = true
+}
+
+const roleMenuOpen = ref(false)
+const roleMenuTrigger = ref(null)
+
+const { data: rolesList = ref([]) } = useAdminRolesListQuery()
+const roleIdByName = computed(() => {
+  const map = {}
+  ;(rolesList.value ?? []).forEach((r) => {
+    if (r?.name) map[r.name] = r.id
+  })
+  return map
+})
+
+const updateRoleMutation = useUpdateAdminUserRoleMutation()
+
+const invalidateUsers = () => queryClient.invalidateQueries({ queryKey: adminUsersKeys.all })
+
+const onRoleClick = (event, user) => {
+  const trigger = event.currentTarget
+  if (roleMenuOpen.value && roleMenuTrigger.value === trigger) {
+    roleMenuOpen.value = false
+    return
+  }
+  activeUser.value = user
+  roleMenuTrigger.value = trigger
+  roleMenuOpen.value = true
+}
+
+const onChangeRole = (targetRoleName) => {
+  const user = activeUser.value
+  if (!user) return
+  const roleId = roleIdByName.value[targetRoleName]
+  const payload = roleId ? { roleId } : { role: targetRoleName }
+  updateRoleMutation.mutate({ id: user.id, payload }, { onSuccess: invalidateUsers })
+}
+
+const roleMenuItems = computed(() => {
+  const current = activeUser.value ? roleName(activeUser.value) : null
+  return CHANGEABLE_ROLES.filter((r) => r !== current).map((r) => ({
+    key: `role-${r}`,
+    label: `تغییر به ${ROLE_LABELS[r]}`,
+    icon: 'arrows-clockwise',
+    onClick: () => onChangeRole(r),
+  }))
+})
+
+const menuItems = computed(() => [
+  {
+    key: 'edit',
+    label: 'ویرایش',
+    icon: 'pencil',
+    onClick: () => emit('edit', activeUser.value),
+  },
+  {
+    key: 'delete',
+    label: 'حذف',
+    icon: 'trash',
+    onClick: () => emit('delete', activeUser.value),
+  },
+  {
+    key: 'block',
+    label: 'مسدود کردن کاربر',
+    icon: 'close',
+    danger: true,
+    onClick: () => emit('block', activeUser.value),
+  },
+  {
+    key: 'show-assignments',
+    label: 'جزئیات تکلیف',
+    icon: 'file',
+    onClick: () => emit('show-assignments', activeUser.value),
+  },
+  {
+    key: 'show-exams',
+    label: 'جزئیات آزمون',
+    icon: 'file',
+    onClick: () => emit('show-exams', activeUser.value),
+  },
+  {
+    key: 'export-pdf',
+    label: 'خروجی PDF',
+    icon: 'upload',
+    onClick: () => emit('export-pdf', activeUser.value),
+  },
+])
+</script>
+
+<style lang="scss" scoped>
+.users-table {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    padding: 0.75rem 1rem;
+    background: rgba(255, 255, 255, 85%);
+    border-radius: 0.875rem;
+    box-shadow: 0 4px 10px -6px rgba(241, 241, 241, 70%);
+  }
+
+  &__avatar {
+    height: 3rem;
+    width: 3rem;
+    border-radius: 9999px;
+    overflow: hidden;
+    background: #f3f4f6;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-family: var(--font-family-fa);
+    font-weight: 500;
+    font-size: 0.95rem;
+    color: #1f2937;
+    margin: 0 0 0.25rem;
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    font-family: var(--font-family-fa);
+    font-size: 0.75rem;
+    color: var(--color-prim-gray);
+  }
+
+  &__sep {
+    color: var(--color-thd-gray);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.25rem;
+    flex-shrink: 0;
+  }
+
+  &__more {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+    border: none;
+    border-radius: 9999px;
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  }
+
+  &__more-dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 9999px;
+    background-color: var(--color-prim-gray);
+  }
+
+  &__details-btn {
+    min-width: fit-content;
+    padding: 0 1rem;
+  }
+
+  &__role-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.875rem;
+    border: 1px solid transparent;
+    border-radius: 9999px;
+    background: rgba(0, 0, 0, 4%);
+    font-family: var(--font-family-fa);
+    font-size: 0.8rem;
+    color: #4b4b4b;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    &:hover:not(:disabled) {
+      background: rgba(0, 0, 0, 7%);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    &--student {
+      color: var(--color-primary);
+      background: rgba(var(--color-primary-rgb, 204, 40, 49), 8%);
+    }
+
+    &--teacher {
+      color: #ff9d00;
+      background: rgba(255, 157, 0, 10%);
+    }
+
+    &--counselor {
+      color: #0048ff;
+      background: rgba(0, 72, 255, 8%);
+    }
+
+    &--missionary {
+      color: var(--color-secondary, #6b6b6b);
+      background: rgba(107, 107, 107, 8%);
+    }
+
+    &--admin {
+      color: #1f2937;
+      background: rgba(31, 41, 55, 8%);
+    }
+  }
+
+  &__role-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background: currentcolor;
+  }
+}
+</style>
@@ -0,0 +1,30 @@
+<template>
+  <BasicModal
+    title="تکالیف"
+    title-en="Assignments"
+    width="95%"
+    max-width="65rem"
+    min-width="auto"
+    :show-close-button="true"
+  >
+    <template #default>
+      <div class="user-assignments">
+        <NoItems title="بدون تکلیف" desc="این کاربر هنوز تکلیفی ارائه نکرده است." />
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup>
+import BasicModal from '@/components/BasicModal.vue'
+import NoItems from '@/components/blocks/NoItems.vue'
+
+defineOptions({ name: 'UserAssignmentsModal' })
+</script>
+
+<style lang="scss" scoped>
+.user-assignments {
+  width: 100%;
+  padding: 1rem 0;
+}
+</style>
@@ -0,0 +1,295 @@
+<template>
+  <BasicModal
+    title="جزئیات کاربر"
+    title-en="User details"
+    width="95%"
+    max-width="70rem"
+    min-width="auto"
+    :show-close-button="true"
+  >
+    <template #default="{ close }">
+      <div class="user-details">
+        <SkeletonLoaderBlock v-if="isLoading" :rows="4" :cols-per-row="1" />
+
+        <template v-else-if="user">
+          <div class="user-details__section">
+            <div v-if="isStudent && !user.profileCompleted" class="user-details__notice">
+              <SvgIcon name="warning" :size="20" color="var(--color-primary)" />
+              <span>اطلاعات ثبت نام این دانشجو کامل نیست.</span>
+            </div>
+
+            <div class="user-details__head">
+              <div class="user-details__avatar">
+                <img v-if="user.avatarUrl" :src="user.avatarUrl" :alt="fullName" />
+                <SvgIcon v-else name="user" :size="48" color="#cbd5e1" />
+              </div>
+              <div class="user-details__identity">
+                <div class="user-details__status" :class="statusModifier">
+                  <span class="user-details__status-dot" />
+                  <span>{{ user.status === 'blocked' ? 'غیر فعال' : 'فعال' }}</span>
+                </div>
+                <p class="user-details__label">نام و نام خانوادگی</p>
+                <p class="user-details__name">{{ fullName || '—' }}</p>
+                <p class="user-details__role">
+                  <span class="user-details__role-key">نقش:</span>
+                  <span class="user-details__role-val">{{ roleText }}</span>
+                </p>
+              </div>
+            </div>
+
+            <div class="user-details__grid">
+              <LineInfoBlock
+                title="تاریخ تولد"
+                :numeric-desc="user.faBirthDate || formatJalaaliDate(user.birthDate) || '—'"
+              />
+              <LineInfoBlock title="شماره تماس" :numeric-desc="user.phoneNumber || '—'" />
+              <LineInfoBlock title="کد ملی" :numeric-desc="user.nationalCode || '—'" />
+              <LineInfoBlock title="وضعیت تاهل" :desc="MARITAL_STATUS[user.maritalStatus] || '—'" />
+              <LineInfoBlock title="جنسیت" :desc="GENDER[user.gender] || '—'" />
+              <LineInfoBlock title="استان" :desc="user.address?.province?.name || '—'" />
+              <LineInfoBlock title="شهر" :desc="user.address?.city?.name || '—'" />
+            </div>
+
+            <LineInfoBlock title="آدرس" :desc="user.address?.address || '—'" />
+            <LineInfoBlock title="بیوگرافی" :desc="user.bio || '—'" />
+          </div>
+
+          <div v-if="isStudent && user.profileCompleted" class="user-details__section">
+            <LineTitleBlock title="اطلاعات تحصیلی و شغلی" title-en="Academic information" />
+            <div class="user-details__grid">
+              <LineInfoBlock
+                title="وضعیت تحصیلی"
+                :desc="EDUCATION_STATUS[user.educationStatus] || '—'"
+              />
+              <LineInfoBlock
+                title="آخرین مدرک حوزوی"
+                :desc="SEMINARY_LEVEL[user.seminaryLevel] || '—'"
+              />
+              <LineInfoBlock
+                title="آخرین مدرک دانشگاهی"
+                :desc="UNIVERSITY_LEVEL[user.universityLevel] || '—'"
+              />
+              <LineInfoBlock title="نام حوزه/دانشگاه" :desc="user.universityName || '—'" />
+            </div>
+            <LineInfoBlock title="گرایش/رشته تحصیلی" :desc="user.fieldOfStudy || '—'" />
+          </div>
+        </template>
+
+        <NoItems v-else title="یافت نشد" desc="اطلاعات این کاربر در دسترس نیست." />
+
+        <div class="user-details__divider" />
+        <div class="user-details__footer">
+          <BaseButton text="تایید" custom-class="user-details__close-btn" @click="close">
+            <template #appendIcon>
+              <SvgIcon name="arrow-left" :size="18" color="#fff" />
+            </template>
+          </BaseButton>
+        </div>
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import BasicModal from '@/components/BasicModal.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import LineTitleBlock from '@/components/LineTitleBlock.vue'
+import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
+import NoItems from '@/components/blocks/NoItems.vue'
+import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import useModal from '@/composables/useModal'
+import { useAdminUserQuery } from '@/services/query/admin-users'
+import {
+  EDUCATION_STATUS,
+  GENDER,
+  MARITAL_STATUS,
+  ROLE_LABELS,
+  SEMINARY_LEVEL,
+  UNIVERSITY_LEVEL,
+} from '@/enums'
+import { formatJalaaliDate } from '@/utils/date-utils'
+
+defineOptions({ name: 'UserDetailsModal' })
+
+const { getModal } = useModal()
+
+const modalData = computed(() => getModal('UserDetailsModal')?.data ?? {})
+const userId = computed(() => modalData.value.id ?? null)
+
+const { data: user, isLoading } = useAdminUserQuery(userId, {
+  enabled: () => !!userId.value,
+})
+
+const fullName = computed(() =>
+  `${user.value?.firstName || ''} ${user.value?.lastName || ''}`.trim()
+)
+
+const roleName = computed(() => {
+  const first = user.value?.roles?.[0]
+  return typeof first === 'string' ? first : first?.name
+})
+
+const roleText = computed(() => {
+  const name = roleName.value
+  return name ? ROLE_LABELS[name] || name : 'بدون نقش'
+})
+
+const isStudent = computed(() => roleName.value === 'student')
+
+const statusModifier = computed(() =>
+  user.value?.status === 'blocked'
+    ? 'user-details__status--blocked'
+    : 'user-details__status--active'
+)
+</script>
+
+<style lang="scss" scoped>
+.user-details {
+  width: 100%;
+  text-align: start;
+
+  &__section {
+    margin-bottom: 1.25rem;
+  }
+
+  &__notice {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.5rem;
+    background-color: rgba(var(--color-primary-rgb, 0, 0, 0), 5%);
+    color: var(--color-primary);
+    font-family: var(--font-family-fa);
+    font-size: 0.85rem;
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    margin-bottom: 0.75rem;
+  }
+
+  &__avatar {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 9999px;
+    background: #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__identity {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  &__status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-family: var(--font-family-fa);
+    font-size: 0.7rem;
+
+    &--active {
+      color: #35c245;
+
+      .user-details__status-dot {
+        background-color: #35c245;
+      }
+    }
+
+    &--blocked {
+      color: var(--color-error);
+
+      .user-details__status-dot {
+        background-color: var(--color-error);
+      }
+    }
+  }
+
+  &__status-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+  }
+
+  &__label {
+    font-family: var(--font-family-fa);
+    font-size: 0.75rem;
+    color: #b7b7b7;
+    margin: 0;
+  }
+
+  &__name {
+    font-family: var(--font-family-fa);
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: #4b4b4b;
+    margin: 0;
+  }
+
+  &__role {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin: 0.25rem 0 0;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.375rem;
+    background-color: rgba(0, 0, 0, 4%);
+    font-family: var(--font-family-fa);
+    font-size: 0.75rem;
+  }
+
+  &__role-key {
+    color: #808080;
+  }
+
+  &__role-val {
+    font-weight: 500;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+
+    @media (min-width: 640px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 1024px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  &__divider {
+    border-block-end: 1px solid var(--color-thd-gray);
+    margin-block: 1.25rem;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__close-btn {
+    min-width: 10rem;
+  }
+}
+</style>
@@ -0,0 +1,30 @@
+<template>
+  <BasicModal
+    title="آزمون ها"
+    title-en="Exams"
+    width="95%"
+    max-width="65rem"
+    min-width="auto"
+    :show-close-button="true"
+  >
+    <template #default>
+      <div class="user-exams">
+        <NoItems title="بدون آزمون" desc="این کاربر هنوز در آزمونی شرکت نکرده است." />
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup>
+import BasicModal from '@/components/BasicModal.vue'
+import NoItems from '@/components/blocks/NoItems.vue'
+
+defineOptions({ name: 'UserExamsModal' })
+</script>
+
+<style lang="scss" scoped>
+.user-exams {
+  width: 100%;
+  padding: 1rem 0;
+}
+</style>
@@ -0,0 +1,252 @@
+<template>
+  <div class="verification-item">
+    <div class="verification-item__user">
+      <div v-if="user.avatarUrl" class="verification-item__avatar">
+        <img :src="user.avatarUrl" :alt="fullName" />
+      </div>
+      <div v-else class="verification-item__avatar verification-item__avatar--placeholder">
+        <SvgIcon name="user" :size="24" color="#bcbcbc" />
+      </div>
+      <div class="verification-item__info">
+        <p class="verification-item__name">{{ fullName }}</p>
+        <p class="verification-item__location">
+          <span>{{ user.address?.province?.name || '—' }}</span>
+          <span class="verification-item__sep">،</span>
+          <span>{{ user.address?.city?.name || '—' }}</span>
+        </p>
+      </div>
+    </div>
+
+    <div class="verification-item__meta">
+      <div class="verification-item__date">
+        <span class="verification-item__date-label">تاریخ ثبت نام:</span>
+        <span class="verification-item__date-value">
+          {{ user.faSubmittedAt || formatJalaaliDate(user.submittedAt) || '—' }}
+        </span>
+      </div>
+      <div
+        v-if="user.status === 'pending'"
+        class="verification-item__badge verification-item__badge--pending"
+      >
+        <span class="verification-item__dot" />
+        <span>در انتظار تایید</span>
+      </div>
+      <button
+        v-else-if="user.status === 'rejected'"
+        type="button"
+        class="verification-item__badge verification-item__badge--rejected"
+        @click="emit('show-reject-reason', user)"
+      >
+        <span class="verification-item__dot" />
+        <span>رد شده</span>
+      </button>
+    </div>
+
+    <div class="verification-item__actions">
+      <CircleButton
+        tooltip="تایید"
+        bg-color="rgba(0, 154, 18, 0.08)"
+        size="2.5rem"
+        @click="emit('verify-user', { id: user.id, status: 'approved' })"
+      >
+        <template #icon>
+          <SvgIcon name="check" :size="20" color="var(--color-secondary)" />
+        </template>
+      </CircleButton>
+      <CircleButton
+        v-if="user.status !== 'rejected'"
+        tooltip="عدم تایید"
+        bg-color="rgba(204, 40, 49, 0.08)"
+        size="2.5rem"
+        @click="emit('verify-user', { id: user.id, status: 'rejected' })"
+      >
+        <template #icon>
+          <SvgIcon name="close" :size="20" color="var(--color-error)" />
+        </template>
+      </CircleButton>
+      <BaseButton
+        custom-class="verification-item__details-btn"
+        text="جزئیات احراز هویت"
+        :loading="detailsLoading"
+        @click="emit('show-details', user.id)"
+      >
+        <template #appendIcon>
+          <SvgIcon name="caret-left" :size="16" color="#fff" />
+        </template>
+      </BaseButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import BaseButton from '@/components/BaseButton.vue'
+import CircleButton from '@/components/CircleButton.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import { formatJalaaliDate } from '@/utils/date-utils'
+
+const props = defineProps({
+  user: { type: Object, required: true },
+  detailsLoading: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['show-details', 'show-reject-reason', 'verify-user'])
+
+const fullName = computed(
+  () => `${props.user.firstName || ''} ${props.user.lastName || ''}`.trim() || '—'
+)
+</script>
+
+<style lang="scss" scoped>
+.verification-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 50%);
+  box-shadow: 0 4px 10px -6px rgba(241, 241, 241, 70%);
+  border-radius: 0.875rem;
+  margin-bottom: 0.625rem;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  &__user {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    flex: 1 1 33%;
+  }
+
+  &__avatar {
+    height: 3rem;
+    width: 3rem;
+    border-radius: 9999px;
+    overflow: hidden;
+    border: 1px solid #eee;
+    flex-shrink: 0;
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+
+    &--placeholder {
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+    }
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+
+  &__name {
+    font-family: var(--font-family-fa);
+    font-weight: 400;
+    font-size: 1rem;
+    color: #4b4b4b;
+    margin: 0;
+    white-space: nowrap;
+  }
+
+  &__location {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-family: var(--font-family-fa);
+    font-size: 0.75rem;
+    font-weight: 300;
+    color: #848484;
+    margin: 0;
+    white-space: nowrap;
+  }
+
+  &__sep {
+    color: #c4c4c4;
+  }
+
+  &__meta {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    flex: 1 1 33%;
+  }
+
+  &__date {
+    background: rgba(107, 107, 107, 5%);
+    padding: 0.25rem 1rem;
+    border-radius: 0.875rem;
+    white-space: nowrap;
+    line-height: 1.5;
+  }
+
+  &__date-label {
+    font-family: var(--font-family-fa);
+    font-weight: 300;
+    font-size: 0.75rem;
+    color: #848484;
+    margin-inline-end: 0.25rem;
+  }
+
+  &__date-value {
+    font-family: var(--font-family-en);
+    font-size: 0.75rem;
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 1rem;
+    border-radius: 0.875rem;
+    font-family: var(--font-family-fa);
+    font-size: 0.7rem;
+    line-height: 1.5;
+    border: none;
+    cursor: default;
+
+    &--pending {
+      background: rgba(0, 255, 68, 6%);
+      color: #009a12;
+    }
+
+    &--rejected {
+      background: rgba(204, 40, 49, 6%);
+      color: var(--color-error);
+      cursor: pointer;
+    }
+  }
+
+  &__dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 9999px;
+    background: currentcolor;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.375rem;
+    flex: 1 1 33%;
+  }
+
+  &__details-btn {
+    min-width: 9rem;
+    padding: 0 0.625rem;
+  }
+}
+</style>
@@ -0,0 +1,121 @@
+<template>
+  <form class="verifications-filters" @submit.prevent="onSubmit">
+    <div class="verifications-filters__grid">
+      <TextField v-model="form.name" name="name" label="جستجو اسم کاربر">
+        <template #appendIcon>
+          <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
+        </template>
+      </TextField>
+      <TextField
+        v-model="form.nationalCode"
+        name="nationalCode"
+        label="کد ملی کاربر"
+        inputmode="numeric"
+        :convert-digits="true"
+      >
+        <template #appendIcon>
+          <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
+        </template>
+      </TextField>
+      <DatePickerField v-model="form.fromDate" name="fromDate" label="از تاریخ" :max="todayIso" />
+      <DatePickerField v-model="form.toDate" name="toDate" label="تا تاریخ" :max="todayIso" />
+    </div>
+
+    <div class="verifications-filters__actions">
+      <CircleButton
+        v-if="hasFilters"
+        tooltip="حذف فیلتر"
+        bg-color="transparent"
+        size="2.5rem"
+        type="button"
+        @click="onReset"
+      >
+        <template #icon>
+          <SvgIcon name="close" :size="20" />
+        </template>
+      </CircleButton>
+      <CircleButton
+        tooltip="اعمال فیلتر"
+        bg-color="rgba(104, 104, 104, 0.05)"
+        size="2.5rem"
+        type="submit"
+      >
+        <template #icon>
+          <SvgIcon name="funnel" :size="20" color="var(--color-error)" />
+        </template>
+      </CircleButton>
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+import TextField from '@/components/form/TextField.vue'
+import DatePickerField from '@/components/form/DatePickerField.vue'
+import CircleButton from '@/components/CircleButton.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => ({ name: '', nationalCode: '', fromDate: '', toDate: '' }),
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'apply', 'reset'])
+
+const emptyForm = () => ({ name: '', nationalCode: '', fromDate: '', toDate: '' })
+
+const form = ref({ ...emptyForm(), ...props.modelValue })
+watch(
+  () => props.modelValue,
+  (next) => {
+    form.value = { ...emptyForm(), ...next }
+  },
+  { deep: true }
+)
+
+const todayIso = new Date().toISOString()
+
+const hasFilters = computed(() =>
+  Object.values(form.value).some((v) => v !== '' && v !== null && v !== undefined)
+)
+
+const onSubmit = () => {
+  emit('update:modelValue', { ...form.value })
+  emit('apply', { ...form.value })
+}
+
+const onReset = () => {
+  form.value = emptyForm()
+  emit('update:modelValue', { ...form.value })
+  emit('reset')
+}
+</script>
+
+<style lang="scss" scoped>
+.verifications-filters {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+
+  &__grid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding-top: 1.75rem;
+  }
+}
+</style>
@@ -0,0 +1,70 @@
+<template>
+  <BasicModal
+    title="جزئیات رد"
+    title-en="Details for Rejection"
+    width="95%"
+    max-width="50rem"
+    min-width="auto"
+    :show-close-button="true"
+  >
+    <template #default="{ data, close }">
+      <div class="reject-reason-details">
+        <div class="reject-reason-details__grid">
+          <div class="reject-reason-details__cell--full">
+            <LineInfoBlock title="توضیحات" :desc="verification(data).adminNote || ''" />
+          </div>
+        </div>
+
+        <div class="reject-reason-details__actions">
+          <BaseButton text="بسیار خب" custom-class="reject-reason-details__btn" @click="close">
+            <template #appendIcon>
+              <SvgIcon name="arrow-left" :size="18" color="#fff" />
+            </template>
+          </BaseButton>
+        </div>
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup>
+import BasicModal from '@/components/BasicModal.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+
+defineOptions({ name: 'RejectReasonDetailsModal' })
+
+const verification = (data) => data?.verification || {}
+</script>
+
+<style lang="scss" scoped>
+.reject-reason-details {
+  width: 100%;
+  text-align: start;
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  &__cell--full {
+    grid-column: 1 / -1;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 1rem;
+  }
+
+  &__btn {
+    min-width: 12rem;
+  }
+}
+</style>
@@ -0,0 +1,154 @@
+<template>
+  <BasicModal
+    title="علت رد"
+    title-en="Reason for Rejection"
+    width="95%"
+    max-width="50rem"
+    min-width="auto"
+    :show-close-button="true"
+  >
+    <template #default="{ data, close }">
+      <form class="reject-reason-modal" @submit.prevent="onSubmit(data, close)">
+        <div class="reject-reason-modal__row">
+          <TextField
+            v-model="form.rejectionReason"
+            name="rejectionReason"
+            label="علت رد"
+            :error="errors.rejectionReason"
+            @blur="validateAt('rejectionReason', form.rejectionReason)"
+          />
+          <SelectField
+            :model-value="form.priority?.id"
+            name="priority"
+            label="وضعیت تیکت"
+            :options="statusOptions"
+            option-label="label"
+            option-value="value"
+            :error="errors.priority"
+            @update:model-value="(e) => handleChange('priority', { id: e })"
+          />
+        </div>
+        <TextareaField
+          v-model="form.adminNote"
+          name="adminNote"
+          label="لطفا علت رد را توضیح دهید"
+          :row="4"
+          :error="errors.adminNote"
+        />
+
+        <div class="reject-reason-modal__divider" />
+
+        <div class="reject-reason-modal__actions">
+          <BaseButton
+            variant="transparent"
+            text="منصرف شدم"
+            custom-class="reject-reason-modal__btn-cancel"
+            @click="close"
+          >
+            <template #prependIcon>
+              <SvgIcon name="caret-right" :size="14" color="var(--color-sec-gray)" />
+            </template>
+          </BaseButton>
+          <BaseButton
+            type="submit"
+            text="ارسال"
+            :loading="changeStatusMutation.isPending.value"
+            custom-class="reject-reason-modal__btn-submit"
+          >
+            <template #appendIcon>
+              <SvgIcon name="arrow-left" :size="18" color="#fff" />
+            </template>
+          </BaseButton>
+        </div>
+      </form>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useQueryClient } from '@tanstack/vue-query'
+import BasicModal from '@/components/BasicModal.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import TextField from '@/components/form/TextField.vue'
+import TextareaField from '@/components/form/TextareaField.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import useYup from '@/composables/useYup'
+import {
+  adminPendingStudentsKeys,
+  useChangePendingStudentStatusMutation,
+} from '@/services/query/admin-pending-students'
+import SelectField from '@/components/form/SelectField.vue'
+import { PRIORITY_STATUS } from '@/enums'
+import { rejectionReasonSchema } from '../../../schema'
+
+defineOptions({ name: 'RejectReasonModal' })
+
+const queryClient = useQueryClient()
+const changeStatusMutation = useChangePendingStudentStatusMutation()
+
+const DEFAULT_FORM = { rejectionReason: '', adminNote: '' }
+
+const { validate, validateAt, errors, resetErrors } = useYup(rejectionReasonSchema)
+
+const form = ref(structuredClone({ ...DEFAULT_FORM }))
+
+const statusOptions = Object.entries(PRIORITY_STATUS).map(([value, label]) => ({
+  value,
+  label,
+}))
+
+const handleChange = (key, value) => {
+  form.value = { ...form.value, [key]: value }
+  validateAt(key, value)
+}
+
+const onSubmit = async (data, close) => {
+  const { isValid, payload } = await validate(form.value)
+  console.log(errors)
+
+  if (!isValid) return
+  const id = data?.id
+  if (!id) return
+  await changeStatusMutation.mutateAsync({
+    id,
+    payload: { status: 'rejected', ...payload },
+  })
+  await queryClient.invalidateQueries({ queryKey: adminPendingStudentsKeys.all })
+  form.value = structuredClone({ ...DEFAULT_FORM })
+  resetErrors()
+  close()
+}
+</script>
+
+<style lang="scss" scoped>
+.reject-reason-modal {
+  width: 100%;
+  text-align: start;
+  padding: 0.5rem;
+
+  &__row {
+    display: flex;
+    gap: 1rem;
+  }
+
+  &__divider {
+    border-block-end: 1px solid var(--color-thd-gray);
+    margin-block: 1rem;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__btn-cancel {
+    min-width: 9rem;
+  }
+
+  &__btn-submit {
+    min-width: 9rem;
+  }
+}
+</style>
@@ -0,0 +1,491 @@
+<template>
+  <BasicModal
+    title="اطلاعات شخصی"
+    title-en="Personal information"
+    width="95%"
+    max-width="80rem"
+    min-width="auto"
+    :show-close-button="true"
+  >
+    <template #default="{ data, close }">
+      <div v-if="!user" class="user-verification-details">
+        <p class="user-verification-details__loading">در حال بارگذاری…</p>
+      </div>
+      <div v-else class="user-verification-details">
+        <section class="user-verification-details__section">
+          <div class="user-verification-details__grid user-verification-details__grid--6">
+            <LineInfoBlock title="نام و نام خانوادگی" :numeric-desc="fullName" />
+            <LineInfoBlock
+              title="تاریخ تولد"
+              :numeric-desc="profile.faBirthDate || formatJalaaliDate(profile.birthDate) || ''"
+            />
+            <LineInfoBlock title="شماره تماس" :numeric-desc="user.phoneNumber" />
+            <LineInfoBlock title="کد ملی" :numeric-desc="user.nationalCode" />
+            <LineInfoBlock
+              title="وضعیت تاهل"
+              :desc="profile.faMaritalStatus || MARITAL_STATUS[profile.maritalStatus] || ''"
+            />
+            <LineInfoBlock title="جنسیت" :desc="profile.faGender || GENDER[profile.gender] || ''" />
+            <LineInfoBlock title="استان" :desc="user.address?.province?.name || '-'" />
+            <LineInfoBlock title="شهر" :desc="user.address?.city?.name || '-'" />
+            <div class="user-verification-details__cell user-verification-details__cell--span-3">
+              <LineInfoBlock title="آدرس" :desc="user.address?.address || '-'" />
+            </div>
+          </div>
+        </section>
+
+        <section class="user-verification-details__section">
+          <LineTitleBlock title="اطلاعات تحصیلی" title-en="Academic information" />
+          <div class="user-verification-details__grid user-verification-details__grid--4">
+            <LineInfoBlock
+              title="وضعیت تحصیلی"
+              :desc="profile.faEducationStatus || EDUCATION_STATUS[profile.educationStatus] || ''"
+            />
+            <LineInfoBlock
+              title="آخرین مدرک تحصیلی (طلبه)"
+              :desc="profile.faSeminaryLevel || SEMINARY_LEVEL[profile.seminaryLevel] || ''"
+            />
+            <LineInfoBlock
+              title="آخرین مدرک تحصیلی"
+              :desc="profile.faUniversityLevel || UNIVERSITY_LEVEL[profile.universityLevel] || ''"
+            />
+            <LineInfoBlock title="نام حوزه علمیه/دانشگاه" :desc="profile.universityName || ''" />
+            <div class="user-verification-details__cell user-verification-details__cell--full">
+              <LineInfoBlock
+                title="گرایش تخصصی حوزوی / رشته تحصیلی دانشگاهی"
+                :desc="profile.fieldOfStudy || ''"
+              />
+            </div>
+            <div class="user-verification-details__cell user-verification-details__cell--full">
+              <LineInfoBlock
+                title="خلاصه‌ای از سوابق شغلی"
+                :desc="profile.workExperienceSummary || ''"
+              />
+            </div>
+            <div class="user-verification-details__cell user-verification-details__cell--full">
+              <LineInfoBlock
+                title="خلاصه‌ای از فعالیت‌ها در موقعیت‌های شغلی"
+                :desc="profile.activitySummary || ''"
+              />
+            </div>
+          </div>
+        </section>
+
+        <section class="user-verification-details__section">
+          <LineTitleBlock title="اطلاعات شغلی" title-en="Job information" />
+          <div class="user-verification-details__grid user-verification-details__grid--4">
+            <div class="user-verification-details__cell user-verification-details__cell--full">
+              <LineInfoBlock
+                title="گرایش تخصصی حوزوی / رشته تحصیلی دانشگاهی"
+                :desc="profile.fieldOfStudy || ''"
+              />
+            </div>
+            <div class="user-verification-details__cell user-verification-details__cell--full">
+              <LineInfoBlock
+                title="خلاصه‌ای از سوابق شغلی"
+                :desc="profile.workExperienceSummary || ''"
+              />
+            </div>
+            <div class="user-verification-details__cell user-verification-details__cell--full">
+              <LineInfoBlock
+                title="خلاصه‌ای از فعالیت‌ها در موقعیت‌های شغلی"
+                :desc="profile.activitySummary || ''"
+              />
+            </div>
+          </div>
+        </section>
+
+        <section class="user-verification-details__section">
+          <LineTitleBlock
+            title="اطلاعات فعالیت تبلیغاتی و حرفه‌ای"
+            title-en="Advertising and professional activity information"
+          />
+          <LineInfoBlock
+            title="سابقه فعالیت تبلیغی شما چند سال می‌باشد؟"
+            :numeric-desc="profile.propagationExperienceYears ?? ''"
+          />
+          <LineInfoBlock
+            title="توضیحات مدل فعالیت تبلیغی"
+            :desc="profile.propagationMethodDescription || ''"
+          />
+          <LineInfoBlock title="موضوعات تخصصی تبلیغی" :desc="profile.specializedTopics || ''" />
+          <LineInfoBlock title="بسترهای فعالیت تبلیغی" :desc="platformsLabel" />
+          <LineInfoBlock
+            v-if="otherPlatformDetails"
+            title="توضیح فعالیت در سایر فضاهای تبلیغی"
+            :desc="otherPlatformDetails"
+          />
+          <LineInfoBlock
+            v-if="onlinePlatformDetails"
+            title="نام شبکه و مدل فعالیت تبلیغی"
+            :desc="onlinePlatformDetails"
+          />
+        </section>
+
+        <section class="user-verification-details__section">
+          <LineTitleBlock title="مهارت‌ها و تخصص‌ها (1)" title-en="Skills and Specialties" />
+          <LineInfoBlock
+            title="عملکرد در شرایط رضایت پایین مخاطبین"
+            :desc="LOW_SATISFACTION_RESPONSE[profile.responseToLowSatisfaction] || ''"
+          />
+          <LineInfoBlock
+            v-if="profile.responseToLowSatisfactionDescription"
+            title="توضیح گزینه «سایر»"
+            :desc="profile.responseToLowSatisfactionDescription"
+          />
+        </section>
+
+        <section class="user-verification-details__section">
+          <LineTitleBlock title="مهارت‌ها و تخصص‌ها (2)" title-en="Skills and Specialties" />
+          <LineInfoBlock
+            title="مواجهه با تعطیلی جلسه به دلیل هزینه"
+            :desc="SESSION_CANCELLATION_RESPONSE[profile.responseToSessionCancellation] || ''"
+          />
+          <LineInfoBlock
+            v-if="profile.responseToSessionCancellationDescription"
+            title="توضیح گزینه «سایر»"
+            :desc="profile.responseToSessionCancellationDescription"
+          />
+        </section>
+
+        <section class="user-verification-details__section">
+          <LineTitleBlock title="مهارت‌ها و تخصص‌ها (3)" title-en="Skills and Specialties" />
+          <LineInfoBlock
+            title="مواجهه با تناقض درخواست مخاطبین"
+            :desc="AUDIENCE_CONFLICT_RESPONSE[profile.responseToAudienceConflict] || ''"
+          />
+          <LineInfoBlock
+            v-if="profile.responseToAudienceConflictDescription"
+            title="توضیح گزینه «سایر»"
+            :desc="profile.responseToAudienceConflictDescription"
+          />
+        </section>
+
+        <section class="user-verification-details__section">
+          <LineTitleBlock title="مهارت‌ها و تخصص‌ها (4)" title-en="Skills and Specialties" />
+          <LineInfoBlock
+            title="مواجهه با مبلغه رقیب"
+            :desc="COMPETING_PROPAGATOR_RESPONSE[profile.responseToCompetingPropagator] || ''"
+          />
+          <LineInfoBlock
+            v-if="profile.responseToCompetingPropagatorDescription"
+            title="توضیح گزینه «سایر»"
+            :desc="profile.responseToCompetingPropagatorDescription"
+          />
+        </section>
+
+        <section class="user-verification-details__section">
+          <LineTitleBlock title="مهارت‌ها و تخصص‌ها (5)" title-en="Skills and Specialties" />
+          <LineInfoBlock
+            title="مواجهه با مدعیان نسخه‌های دینی"
+            :desc="profile.responseToUnqualifiedAdvisors || ''"
+          />
+          <LineInfoBlock
+            title="مدارک و گواهینامه‌های مرتبط"
+            :desc="profile.relevantCertificates || ''"
+          />
+          <LineInfoBlock title="مواجهه با موضوع حجاب" :desc="profile.hijabApproach || ''" />
+        </section>
+
+        <section v-if="faithProduction?.url" class="user-verification-details__section">
+          <LineTitleBlock title="بخش صوت" title-en="Audio section" />
+          <LineInfoBlock title="نظر و تحلیل از ویدئو ارائه شده" />
+          <audio :src="faithProduction.url" controls class="user-verification-details__audio" />
+        </section>
+
+        <section v-if="leaderMessage?.url" class="user-verification-details__section">
+          <LineTitleBlock title="بخش تصویر" title-en="Video section" />
+          <LineInfoBlock title="درک و برداشت از پیام رهبری" />
+          <video
+            :src="leaderMessage.url"
+            controls
+            playsinline
+            class="user-verification-details__video"
+          />
+        </section>
+
+        <div class="user-verification-details__divider" />
+
+        <div class="user-verification-details__actions">
+          <BaseButton
+            text="ذخیره به صورت PDF"
+            :loading="pdfLoading"
+            custom-class="user-verification-details__pdf-btn"
+            @click="onSaveAsPdf(data, close)"
+          >
+            <template #appendIcon>
+              <SvgIcon name="arrow-left" :size="18" color="#fff" />
+            </template>
+          </BaseButton>
+        </div>
+      </div>
+    </template>
+  </BasicModal>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+import BasicModal from '@/components/BasicModal.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import CircleButton from '@/components/CircleButton.vue'
+import LineTitleBlock from '@/components/LineTitleBlock.vue'
+import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import useModal from '@/composables/useModal'
+import {
+  AUDIENCE_CONFLICT_RESPONSE,
+  COMPETING_PROPAGATOR_RESPONSE,
+  EDUCATION_STATUS,
+  GENDER,
+  LOW_SATISFACTION_RESPONSE,
+  MARITAL_STATUS,
+  PROPAGATION_PLATFORM,
+  SEMINARY_LEVEL,
+  SESSION_CANCELLATION_RESPONSE,
+  UNIVERSITY_LEVEL,
+  USER_STATUS,
+  VERIFICATION_MEDIA_TYPE,
+} from '@/enums'
+import { formatJalaaliDate } from '@/utils/date-utils'
+import {
+  usePendingStudentQuery,
+  useDownloadPendingStudentPdfMutation,
+} from '@/services/query/admin-pending-students'
+
+defineOptions({ name: 'UserVerificationDetailsModal' })
+
+const { getModal } = useModal()
+
+const modalData = computed(() => getModal('UserVerificationDetailsModal')?.data ?? {})
+const userId = computed(() => modalData.value.id ?? null)
+const userIdRef = computed(() => userId.value)
+
+const { data: fetched } = usePendingStudentQuery(userIdRef, {
+  enabled: () => !!userIdRef.value,
+})
+
+const user = computed(() => modalData.value.user || fetched.value || null)
+const profile = computed(() => user.value?.profile || {})
+const fullName = computed(
+  () => `${user.value?.firstName || ''} ${user.value?.lastName || ''}`.trim() || '—'
+)
+
+const platforms = computed(() =>
+  Array.isArray(profile.value.propagationPlatforms) ? profile.value.propagationPlatforms : []
+)
+
+const platformsLabel = computed(() =>
+  platforms.value
+    .map((p) => PROPAGATION_PLATFORM[p.platform] || p.platform)
+    .filter(Boolean)
+    .join(' ، ')
+)
+
+const otherPlatformDetails = computed(
+  () => platforms.value.find((p) => p.platform === 'other')?.platformDetails || ''
+)
+const onlinePlatformDetails = computed(
+  () => platforms.value.find((p) => p.platform === 'online')?.platformDetails || ''
+)
+
+const verificationMedia = computed(() => user.value?.verification?.media || [])
+const faithProduction = computed(() =>
+  verificationMedia.value.find((m) => m.type === VERIFICATION_MEDIA_TYPE.FAITH_PRODUCTION)
+)
+const leaderMessage = computed(() =>
+  verificationMedia.value.find((m) => m.type === VERIFICATION_MEDIA_TYPE.LEADER_MESSAGE)
+)
+
+const statusLabel = (status) => {
+  if (status === 'pending') return 'در انتظار تایید'
+  if (status === 'rejected') return 'رد شده'
+  return USER_STATUS[status] || status || ''
+}
+
+const pdfLoading = ref(false)
+const pdfMutation = useDownloadPendingStudentPdfMutation()
+
+const onSaveAsPdf = async (data, close) => {
+  if (!user.value?.id) return
+  pdfLoading.value = true
+  try {
+    const response = await pdfMutation.mutateAsync(user.value.id)
+    const url = response?.data?.downloadUrl || response?.downloadUrl
+    if (url) {
+      const link = document.createElement('a')
+      link.href = url
+      link.target = '_blank'
+      link.download = 'profile.pdf'
+      document.body.append(link)
+      link.click()
+      link.remove()
+    }
+    close()
+  } finally {
+    pdfLoading.value = false
+  }
+  data
+}
+</script>
+
+<style lang="scss" scoped>
+.user-verification-details {
+  width: 100%;
+  text-align: start;
+
+  &__loading {
+    text-align: center;
+    padding: 2rem;
+    color: var(--color-prim-gray);
+  }
+
+  &__section {
+    margin-bottom: 1.5rem;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.25rem;
+
+    &--4 {
+      @media (min-width: 768px) {
+        grid-template-columns: repeat(4, 1fr);
+      }
+    }
+
+    &--6 {
+      @media (min-width: 768px) {
+        grid-template-columns: repeat(6, 1fr);
+      }
+    }
+  }
+
+  &__cell {
+    &--span-2 {
+      @media (min-width: 768px) {
+        grid-column: span 2;
+      }
+    }
+
+    &--span-3 {
+      @media (min-width: 768px) {
+        grid-column: span 3;
+      }
+    }
+
+    &--full {
+      grid-column: 1 / -1;
+    }
+  }
+
+  &__person {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  &__avatar {
+    height: 6rem;
+    width: 6rem;
+    min-width: 6rem;
+    border-radius: 9999px;
+    border: 1px solid #eee;
+    overflow: hidden;
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+
+    &--placeholder {
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+    }
+  }
+
+  &__person-info {
+    text-align: start;
+  }
+
+  &__person-label {
+    font-family: var(--font-family-fa);
+    font-size: 0.75rem;
+    color: #b7b7b7;
+    margin: 0;
+  }
+
+  &__person-name {
+    font-family: var(--font-family-fa);
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: #4b4b4b;
+    margin: 0.25rem 0;
+  }
+
+  &__status-badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+    margin: 0;
+
+    &--pending {
+      background: rgba(0, 255, 68, 6%);
+    }
+
+    &--rejected {
+      background: rgba(204, 40, 49, 6%);
+    }
+  }
+
+  &__status-label {
+    color: #808080;
+    padding-inline: 0.125rem;
+  }
+
+  &__status-value {
+    font-family: var(--font-family-fa);
+    font-weight: 500;
+    font-size: 0.875rem;
+    padding-inline: 0.125rem;
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    .user-verification-details__status-badge--pending & {
+      color: #009a12;
+    }
+
+    /* stylelint-disable-next-line selector-class-pattern */
+    .user-verification-details__status-badge--rejected & {
+      color: var(--color-primary);
+    }
+  }
+
+  &__audio,
+  &__video {
+    width: 100%;
+    margin-top: 0.5rem;
+  }
+
+  &__divider {
+    border-block-end: 1px solid var(--color-thd-gray);
+    margin-block: 1.5rem;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  &__pdf-btn {
+    min-width: 12rem;
+  }
+}
+</style>
@@ -0,0 +1,486 @@
+<template>
+  <div class="user-form">
+    <BoxedIconTitleBlock
+      class="user-form__heading"
+      :title="isEditMode ? 'ویرایش کاربر' : 'افزودن کاربر جدید'"
+      :desc="
+        isEditMode ? 'اطلاعات کاربر را به‌روز کنید' : 'در این قسمت می‌توانید کاربر جدید اضافه کنید'
+      "
+    >
+      <template #icon>
+        <SvgIcon name="user" :size="24" color="var(--color-primary)" />
+      </template>
+    </BoxedIconTitleBlock>
+
+    <form class="user-form__form" @submit.prevent="onSubmit">
+      <div class="user-form__grid">
+        <div class="user-form__avatar-col">
+          <ImageCropper
+            v-model="avatar"
+            name="avatar"
+            bg-color="#eeeeee"
+            @crop="onAvatarCropped"
+            @error="onAvatarError"
+          />
+        </div>
+
+        <div class="user-form__main-col">
+          <LineTitleBlock title="مشخصات فردی" title-en="Personal Details" />
+          <div class="user-form__row">
+            <div class="user-form__cell user-form__cell--third">
+              <SelectField
+                v-model="form.roleId"
+                name="roleId"
+                label="نقش"
+                :options="roleOptions"
+                option-label="label"
+                option-value="id"
+                :error="errors.roleId"
+                @change="validateAt('roleId', form.roleId)"
+              />
+            </div>
+            <div class="user-form__cell user-form__cell--third">
+              <TextField
+                v-model="form.firstName"
+                name="firstName"
+                label="نام"
+                :error="errors.firstName"
+                @blur="validateAt('firstName', form.firstName)"
+              >
+                <template #appendIcon>
+                  <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
+                </template>
+              </TextField>
+            </div>
+            <div class="user-form__cell user-form__cell--third">
+              <TextField
+                v-model="form.lastName"
+                name="lastName"
+                label="نام خانوادگی"
+                :error="errors.lastName"
+                @blur="validateAt('lastName', form.lastName)"
+              >
+                <template #appendIcon>
+                  <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
+                </template>
+              </TextField>
+            </div>
+            <div class="user-form__cell user-form__cell--third">
+              <DatePickerField
+                v-model="form.birthDate"
+                name="birthDate"
+                label="تاریخ تولد"
+                :max="todayIso"
+                :error="errors.birthDate"
+              />
+            </div>
+            <div class="user-form__cell user-form__cell--third">
+              <TextField
+                v-model="form.nationalCode"
+                name="nationalCode"
+                label="کد ملی"
+                inputmode="numeric"
+                :convert-digits="true"
+                :disabled="isEditMode && !!initialNationalCode"
+                :error="errors.nationalCode"
+                @blur="validateAt('nationalCode', form.nationalCode)"
+              >
+                <template #appendIcon>
+                  <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
+                </template>
+              </TextField>
+            </div>
+            <div class="user-form__cell user-form__cell--third">
+              <SelectField
+                v-model="form.maritalStatus"
+                name="maritalStatus"
+                label="وضعیت تاهل"
+                :options="maritalStatusOptions"
+                option-label="label"
+                option-value="value"
+              />
+            </div>
+            <div class="user-form__cell user-form__cell--third">
+              <SelectField
+                v-model="form.gender"
+                name="gender"
+                label="جنسیت"
+                :options="genderOptions"
+                option-label="label"
+                option-value="value"
+              />
+            </div>
+            <div class="user-form__cell user-form__cell--full">
+              <TextareaField
+                v-model="form.bio"
+                name="bio"
+                label="زندگی نامه"
+                :row="3"
+                :error="errors.bio"
+              />
+            </div>
+          </div>
+
+          <LineTitleBlock title="اطلاعات تماس" title-en="Contact Details" />
+          <div class="user-form__row">
+            <div class="user-form__cell user-form__cell--third">
+              <TextField
+                v-model="form.phoneNumber"
+                name="phoneNumber"
+                label="شماره تلفن همراه"
+                inputmode="numeric"
+                :convert-digits="true"
+                :error="errors.phoneNumber"
+                @blur="validateAt('phoneNumber', form.phoneNumber)"
+              >
+                <template #appendIcon>
+                  <SvgIcon name="phone" :size="20" color="var(--color-thd-gray)" />
+                </template>
+              </TextField>
+            </div>
+            <div class="user-form__cell user-form__cell--third">
+              <SelectField
+                v-model="form.provinceId"
+                name="provinceId"
+                label="استان"
+                :options="provinces"
+                option-label="name"
+                option-value="id"
+                @change="onProvinceChange"
+              />
+            </div>
+            <div class="user-form__cell user-form__cell--third">
+              <SelectField
+                v-model="form.cityId"
+                name="cityId"
+                label="شهر"
+                :options="cities"
+                option-label="name"
+                option-value="id"
+                :disabled="!form.provinceId"
+              />
+            </div>
+            <div class="user-form__cell user-form__cell--full">
+              <TextareaField
+                v-model="form.address"
+                name="address"
+                label="آدرس محل سکونت"
+                :row="isMobile ? 5 : 2"
+              />
+            </div>
+          </div>
+
+          <template v-if="!isEditMode">
+            <LineTitleBlock title="رمز عبور" title-en="Password" />
+            <div class="user-form__row">
+              <div class="user-form__cell user-form__cell--half">
+                <PasswordField
+                  v-model="form.password"
+                  name="password"
+                  label="رمز عبور"
+                  :error="errors.password"
+                  @blur="validateAt('password', form.password)"
+                />
+              </div>
+              <div class="user-form__cell user-form__cell--half">
+                <PasswordField
+                  v-model="form.passwordConfirmation"
+                  name="passwordConfirmation"
+                  label="تکرار رمز عبور"
+                  :error="errors.passwordConfirmation"
+                  @blur="validateAt('passwordConfirmation', form.passwordConfirmation)"
+                />
+              </div>
+            </div>
+          </template>
+
+          <div class="user-form__actions">
+            <BaseButton
+              variant="transparent"
+              text="انصراف"
+              custom-class="user-form__btn-cancel"
+              @click="onCancel"
+            />
+            <BaseButton
+              type="submit"
+              :text="isEditMode ? 'ذخیره تغییرات' : 'ثبت کاربر'"
+              :loading="submitting"
+              custom-class="user-form__btn-submit"
+            >
+              <template #appendIcon>
+                <SvgIcon name="arrow-left" :size="20" color="#fff" />
+              </template>
+            </BaseButton>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toast } from 'vue3-toastify'
+import { useQueryClient } from '@tanstack/vue-query'
+import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
+import LineTitleBlock from '@/components/LineTitleBlock.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import TextField from '@/components/form/TextField.vue'
+import SelectField from '@/components/form/SelectField.vue'
+import TextareaField from '@/components/form/TextareaField.vue'
+import DatePickerField from '@/components/form/DatePickerField.vue'
+import PasswordField from '@/components/form/PasswordField.vue'
+import ImageCropper from '@/components/form/ImageCropper.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import useYup from '@/composables/useYup'
+import {
+  adminUsersKeys,
+  useAddAdminUserMutation,
+  useAdminRolesListQuery,
+  useAdminUserQuery,
+  useUpdateAdminUserMutation,
+} from '@/services/query/admin-users'
+import { useGetCitiesOfProvinceQuery, useGetProvincesQuery } from '@/services/query/common'
+import { useUploadTemporaryMutation } from '@/services/query/auth'
+import { GENDER, MARITAL_STATUS, ROLE_LABELS } from '@/enums'
+import { userAddSchema, userEditSchema } from '@/features/admin/users/schema'
+import { objectToFormData } from '@/utils/object-to-formdata'
+
+const route = useRoute()
+const router = useRouter()
+const queryClient = useQueryClient()
+
+const userId = computed(() => (route.params.id ? Number(route.params.id) : null))
+const isEditMode = computed(() => !!userId.value)
+
+const isMobile = ref(window.innerWidth < 1024)
+const onResize = () => {
+  isMobile.value = window.innerWidth < 1024
+}
+onMounted(() => window.addEventListener('resize', onResize))
+onBeforeUnmount(() => window.removeEventListener('resize', onResize))
+
+const todayIso = new Date().toISOString()
+
+const maritalStatusOptions = Object.entries(MARITAL_STATUS).map(([value, label]) => ({
+  value,
+  label,
+}))
+const genderOptions = Object.entries(GENDER).map(([value, label]) => ({ value, label }))
+
+const { data: roles = ref([]) } = useAdminRolesListQuery()
+const roleOptions = computed(() =>
+  (roles.value ?? []).map((r) => ({ ...r, label: ROLE_LABELS[r.name] || r.name }))
+)
+const { data: provinces = ref([]) } = useGetProvincesQuery()
+
+const provinceIdRef = ref(null)
+const { data: cities = ref([]) } = useGetCitiesOfProvinceQuery(provinceIdRef, {
+  enabled: () => !!provinceIdRef.value,
+})
+
+const initialNationalCode = ref('')
+
+const form = ref({
+  roleId: '',
+  firstName: '',
+  lastName: '',
+  birthDate: '',
+  nationalCode: '',
+  maritalStatus: '',
+  gender: '',
+  bio: '',
+  phoneNumber: '',
+  provinceId: '',
+  cityId: '',
+  address: '',
+  avatarId: null,
+  password: '',
+  passwordConfirmation: '',
+})
+
+const avatar = ref(null)
+
+const schema = isEditMode.value ? userEditSchema : userAddSchema
+
+const { validate, validateAt, errors } = useYup(schema)
+
+const onProvinceChange = () => {
+  provinceIdRef.value = form.value.provinceId
+  form.value.cityId = ''
+}
+
+watch(
+  () => form.value.provinceId,
+  (val) => {
+    provinceIdRef.value = val
+  }
+)
+
+const { data: existingUser } = useAdminUserQuery(userId, {
+  enabled: () => !!userId.value,
+})
+
+watch(existingUser, (user) => {
+  if (!user) return
+  const firstRole = Array.isArray(user.roles) ? user.roles[0] : null
+  const firstRoleId = typeof firstRole === 'object' ? firstRole?.id : null
+  form.value = {
+    ...form.value,
+    roleId: user.roleId || user.profile?.roleId || firstRoleId || '',
+    firstName: user.firstName || '',
+    lastName: user.lastName || '',
+    birthDate: user.profile?.birthDate || '',
+    nationalCode: user.nationalCode || '',
+    maritalStatus: user.profile?.maritalStatus || '',
+    gender: user.profile?.gender || '',
+    bio: user.profile?.bio || '',
+    phoneNumber: user.phoneNumber || '',
+    provinceId: user.address?.province?.id || '',
+    cityId: user.address?.city?.id || '',
+    address: user.address?.address || '',
+    avatarId: user.profile?.avatarId || null,
+  }
+  initialNationalCode.value = user.nationalCode || ''
+  if (user.avatarUrl) {
+    avatar.value = { url: user.avatarUrl }
+  }
+})
+
+const uploadMutation = useUploadTemporaryMutation()
+
+const onAvatarCropped = async (file) => {
+  try {
+    const formData = objectToFormData({ file, subType: 'avatar', context: 'user' })
+    const response = await uploadMutation.mutateAsync(formData)
+    const payload = response?.data ?? response
+    avatar.value = { url: payload?.url, uploadId: payload?.uploadId, ...payload }
+    form.value.avatarId = payload?.uploadId || payload?.id
+  } catch {
+    /* error handled by global handler */
+  }
+}
+
+const onAvatarError = (msg) => toast.error(msg)
+
+const addMutation = useAddAdminUserMutation()
+const updateMutation = useUpdateAdminUserMutation()
+
+const submitting = computed(() => addMutation.isPending.value || updateMutation.isPending.value)
+
+const onSubmit = async () => {
+  const { isValid, payload } = await validate(form.value)
+  if (!isValid) return
+  if (isEditMode.value) {
+    await updateMutation.mutateAsync({ id: userId.value, payload })
+  } else {
+    await addMutation.mutateAsync(payload)
+  }
+  await queryClient.invalidateQueries({ queryKey: adminUsersKeys.all })
+  router.push({ name: 'admin-users' })
+}
+
+const onCancel = () => router.push({ name: 'admin-users' })
+</script>
+
+<style lang="scss" scoped>
+.user-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__heading {
+    margin-bottom: 0.75rem;
+  }
+
+  &__form {
+    background: rgba(255, 255, 255, 60%);
+    padding: 1rem;
+    border-radius: 1rem;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+
+    @media (min-width: 1024px) {
+      grid-template-columns: 4fr 8fr;
+    }
+
+    @media (min-width: 1280px) {
+      grid-template-columns: 3fr 9fr;
+    }
+  }
+
+  &__avatar-col {
+    order: 2;
+
+    @media (min-width: 1024px) {
+      order: 1;
+      padding: 0.5rem;
+    }
+  }
+
+  &__main-col {
+    order: 1;
+
+    @media (min-width: 1024px) {
+      order: 2;
+      padding-inline-start: 1.25rem;
+    }
+  }
+
+  &__row {
+    display: flex;
+    flex-flow: column wrap;
+    gap: 0.5rem;
+    align-items: stretch;
+    margin-bottom: 0.5rem;
+
+    @media (min-width: 768px) {
+      flex-direction: row;
+    }
+  }
+
+  &__cell {
+    width: 100%;
+
+    &--third {
+      @media (min-width: 768px) {
+        width: 49%;
+      }
+
+      @media (min-width: 1280px) {
+        width: 32.3%;
+      }
+    }
+
+    &--half {
+      @media (min-width: 768px) {
+        width: 49%;
+      }
+    }
+
+    &--full {
+      width: 100%;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.625rem;
+    margin-top: 1rem;
+  }
+
+  &__btn-cancel {
+    min-width: 9rem;
+  }
+
+  &__btn-submit {
+    min-width: 11rem;
+  }
+}
+</style>
@@ -0,0 +1,126 @@
+<template>
+  <div class="user-verification-page">
+    <BoxedIconTitleBlock
+      class="user-verification-page__heading"
+      title="تایید هویت کاربران"
+      desc="در این قسمت می‌توانید کاربران خود را تایید یا رد کنید"
+    >
+      <template #icon>
+        <SvgIcon name="users-three" :size="24" color="var(--color-primary)" />
+      </template>
+    </BoxedIconTitleBlock>
+
+    <VerificationsFilters v-model="filters" @apply="onFilterApply" @reset="onFilterReset" />
+
+    <SimpleTitleIconBlock title="لیست همه کاربران" class="user-verification-page__list-title">
+      <template #header-icon>
+        <SvgIcon name="users" :size="16" color="#bcbcbc" />
+      </template>
+    </SimpleTitleIconBlock>
+
+    <SkeletonLoaderBlock v-if="isLoading" :rows="6" :cols-per-row="1" />
+    <div v-else-if="users.length > 0">
+      <VerificationItem
+        v-for="user in users"
+        :key="user.id"
+        :user="user"
+        @show-details="onShowDetails"
+        @show-reject-reason="onShowRejectReason"
+        @verify-user="onVerifyUser"
+      />
+    </div>
+    <NoItems v-else title="متاسفیم" desc="کاربری برای نمایش وجود ندارد." />
+
+    <PaginationBlock :pagination="paginationMeta" @update:page="setPage" />
+
+    <UserVerificationDetailsModal v-if="isModal('UserVerificationDetailsModal')" />
+    <RejectReasonModal v-if="isModal('RejectReasonModal')" />
+    <RejectReasonDetailsModal v-if="isModal('RejectReasonDetailsModal')" />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useQueryClient } from '@tanstack/vue-query'
+
+import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
+import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
+import NoItems from '@/components/blocks/NoItems.vue'
+import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
+import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import VerificationsFilters from '@/features/admin/users/components/verifications/VerificationsFilters.vue'
+import VerificationItem from '@/features/admin/users/components/verifications/VerificationItem.vue'
+import UserVerificationDetailsModal from '@/features/admin/users/components/verifications/modals/UserVerificationDetailsModal.vue'
+import RejectReasonModal from '@/features/admin/users/components/verifications/modals/RejectReasonModal.vue'
+import RejectReasonDetailsModal from '@/features/admin/users/components/verifications/modals/RejectReasonDetailsModal.vue'
+import {
+  adminPendingStudentsKeys,
+  useChangePendingStudentStatusMutation,
+  usePendingStudentsListQuery,
+} from '@/services/query/admin-pending-students'
+import { usePagination } from '@/composables/usePagination'
+import useModal from '@/composables/useModal'
+
+const queryClient = useQueryClient()
+const { openModal, isModal } = useModal()
+
+const filters = ref({ name: '', nationalCode: '', fromDate: '', toDate: '' })
+const { pagination, setPage, reset: resetPagination } = usePagination({ page: 1, perPage: 10 })
+
+const { data, isLoading } = usePendingStudentsListQuery(filters, pagination, {
+  keepPreviousData: true,
+})
+
+const users = computed(() => data.value?.data ?? [])
+const paginationMeta = computed(() => ({
+  page: pagination.value.page,
+  perPage: pagination.value.perPage,
+  ...data.value?.meta,
+}))
+
+const onFilterApply = () => resetPagination()
+const onFilterReset = () => resetPagination()
+
+const changeStatusMutation = useChangePendingStudentStatusMutation()
+
+const onVerifyUser = ({ id, status }) => {
+  if (status === 'rejected') {
+    openModal('RejectReasonModal', { id })
+    return
+  }
+  changeStatusMutation.mutate(
+    { id, payload: { status } },
+    {
+      onSuccess: () => queryClient.invalidateQueries({ queryKey: adminPendingStudentsKeys.all }),
+    }
+  )
+}
+
+const onShowDetails = (id) => {
+  openModal('UserVerificationDetailsModal', {
+    id,
+    onVerify: ({ id: targetId, status }) => onVerifyUser({ id: targetId, status }),
+  })
+}
+
+const onShowRejectReason = (user) => {
+  openModal('RejectReasonDetailsModal', { verification: user.verification })
+}
+</script>
+
+<style lang="scss" scoped>
+.user-verification-page {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__heading {
+    margin-bottom: 0.5rem;
+  }
+
+  &__list-title {
+    margin-bottom: 0.375rem;
+  }
+}
+</style>
@@ -0,0 +1,148 @@
+<template>
+  <div class="users-page">
+    <BoxedIconTitleBlock
+      class="users-page__heading"
+      title="مدیریت کاربران"
+      desc="در این قسمت می‌توانید کاربران خود را مدیریت کنید"
+    >
+      <template #icon>
+        <SvgIcon name="users-three" :size="24" color="var(--color-primary)" />
+      </template>
+    </BoxedIconTitleBlock>
+
+    <UsersFilters v-model="filters" @apply="onFilterApply" @reset="onFilterReset" />
+
+    <div class="users-page__list-header">
+      <SimpleTitleIconBlock title="لیست همه کاربران" class="users-page__list-title">
+        <template #header-icon>
+          <SvgIcon name="users" :size="16" color="#bcbcbc" />
+        </template>
+      </SimpleTitleIconBlock>
+      <BaseButton text="افزودن کاربر جدید" custom-class="users-page__add-btn" @click="onAdd">
+        <template #appendIcon>
+          <SvgIcon name="plus" :size="18" color="#fff" />
+        </template>
+      </BaseButton>
+    </div>
+
+    <SkeletonLoaderBlock v-if="isLoading" :rows="6" :cols-per-row="1" />
+    <UsersTable
+      v-else-if="users.length > 0"
+      :users="users"
+      @edit="onEdit"
+      @delete="onAskDelete"
+      @show-details="onShowDetails"
+      @show-assignments="onShowAssignments"
+      @show-exams="onShowExams"
+    />
+    <NoItems v-else title="متاسفیم" desc="کاربری برای نمایش وجود ندارد." />
+
+    <PaginationBlock :pagination="paginationMeta" @update:page="setPage" />
+
+    <UserDetailsModal v-if="isModal('UserDetailsModal')" />
+    <UserAssignmentsModal v-if="isModal('UserAssignmentsModal')" />
+    <UserExamsModal v-if="isModal('UserExamsModal')" />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useQueryClient } from '@tanstack/vue-query'
+
+import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
+import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
+import NoItems from '@/components/blocks/NoItems.vue'
+import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
+import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
+import BaseButton from '@/components/BaseButton.vue'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import UsersFilters from '@/features/admin/users/components/UsersFilters.vue'
+import UsersTable from '@/features/admin/users/components/UsersTable.vue'
+import UserDetailsModal from '@/features/admin/users/components/modals/UserDetailsModal.vue'
+import UserAssignmentsModal from '@/features/admin/users/components/modals/UserAssignmentsModal.vue'
+import UserExamsModal from '@/features/admin/users/components/modals/UserExamsModal.vue'
+import {
+  adminUsersKeys,
+  useAdminUsersListQuery,
+  useDeleteAdminUserMutation,
+} from '@/services/query/admin-users'
+import { usePagination } from '@/composables/usePagination'
+import useModal from '@/composables/useModal'
+
+const router = useRouter()
+const queryClient = useQueryClient()
+const { openModal, isModal } = useModal()
+
+const filters = ref({ name: '', nationalCode: '', phoneNumber: '', roleId: '' })
+const { pagination, setPage, reset: resetPagination } = usePagination({ page: 1, perPage: 10 })
+
+const { data, isLoading } = useAdminUsersListQuery(filters, pagination, {
+  keepPreviousData: true,
+})
+
+const users = computed(() => data.value?.data ?? [])
+const paginationMeta = computed(() => ({
+  page: pagination.value.page,
+  perPage: pagination.value.perPage,
+  ...data.value?.meta,
+}))
+
+const onFilterApply = () => resetPagination()
+const onFilterReset = () => resetPagination()
+
+const onAdd = () => {
+  router.push({ name: 'admin-add-user' }).catch(() => {})
+}
+
+const onEdit = (user) => {
+  router.push({ name: 'admin-edit-user', params: { id: user.id } }).catch(() => {})
+}
+
+const onShowDetails = (user) => openModal('UserDetailsModal', { id: user.id })
+const onShowAssignments = (user) => openModal('UserAssignmentsModal', { id: user.id })
+const onShowExams = (user) => openModal('UserExamsModal', { id: user.id })
+
+const deleteMutation = useDeleteAdminUserMutation()
+
+const onAskDelete = (user) => {
+  const name = `${user.firstName || ''} ${user.lastName || ''}`.trim() || user.phoneNumber
+  openModal('ConfirmModal', {
+    title: 'حذف کاربر',
+    message: `آیا از حذف <strong>${name}</strong> مطمئن هستید؟`,
+    onConfirm: () =>
+      deleteMutation.mutate(user.id, {
+        onSuccess: () => queryClient.invalidateQueries({ queryKey: adminUsersKeys.all }),
+      }),
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.users-page {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__heading {
+    margin-bottom: 0.75rem;
+  }
+
+  &__list-header {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin-bottom: 0.375rem;
+  }
+
+  &__list-title {
+    flex: 1;
+    margin-bottom: 0;
+  }
+
+  &__add-btn {
+    min-width: fit-content;
+    padding: 0 1.25rem;
+  }
+}
+</style>
@@ -0,0 +1,40 @@
+import { object, string } from 'yup'
+
+import { phoneNumberRule } from '@/constants/rules/phoneNumberRule'
+import { nationalCodeRule } from '@/constants/rules/nationalCodeRule'
+import { passwordRule } from '@/constants/rules/passwordRule'
+import { passwordConfirmationRule } from '@/constants/rules/passwordConfirmationRule'
+
+export const rejectionReasonSchema = object().shape({
+  rejectionReason: string().required(),
+  priority: object()
+    .shape({
+      id: string().required().default(null),
+    })
+    .required()
+    .default(null),
+  adminNote: string().notRequired(),
+})
+
+const baseUserShape = {
+  roleId: string().required(),
+  firstName: string().required().min(2),
+  lastName: string().required().min(2),
+  phoneNumber: phoneNumberRule,
+  nationalCode: nationalCodeRule,
+  birthDate: string().nullable().notRequired(),
+  maritalStatus: string().nullable().notRequired(),
+  gender: string().nullable().notRequired(),
+  bio: string().nullable().notRequired(),
+  provinceId: string().nullable().notRequired(),
+  cityId: string().nullable().notRequired(),
+  address: string().nullable().notRequired(),
+}
+
+export const userAddSchema = object().shape({
+  ...baseUserShape,
+  password: passwordRule,
+  passwordConfirmation: passwordConfirmationRule,
+})
+
+export const userEditSchema = object().shape(baseUserShape)