fix: complete registration frontend flow

src/components/form/SelectField.vue

@@ -371,12 +371,15 @@ onBeforeUnmount(() => unmountFloating())
     align-items: center;
     gap: 0.5rem;
     width: 100%;
-    padding: 0.25rem 0.75rem;
+    min-height: 2.5rem;
+    padding: 0.5rem 0.75rem;
     border: none;
     border-radius: 1.5rem;
     background: transparent;
     text-align: right;
     font-family: var(--font-family-fa);
+    font-weight: 400;
+    line-height: 1.5;
     cursor: pointer;
     transition: background-color 0.15s;
 

src/enums/index.js

@@ -53,6 +53,8 @@ export const USER_STATUS = Object.freeze({
 export const MARITAL_STATUS = Object.freeze({
   single: 'مجرد',
   married: 'متاهل',
+  divorced: 'مطلقه',
+  widowed: 'بیوه',
 })
 
 export const GENDER = Object.freeze({

src/features/admin/terms/components/modals/AttachCourseToTermModal.vue

@@ -163,8 +163,6 @@ const invalidate = () => {
 }
 
 const onAttach = async (template) => {
-  console.log(template)
-
   if (!termId.value) return
   pendingId.value = template.id
   try {

src/features/auth/components/studentRegister/EducationalInformation.vue

@@ -89,9 +89,9 @@
 <script setup>
 import useYup from '@/composables/useYup'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
 import TextField from '@/components/form/TextField.vue'
 import SelectField from '@/components/form/SelectField.vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import LineTitleBlock from '@/components/LineTitleBlock.vue'
 import TextareaField from '@/components/form/TextareaField.vue'
 import { useSaveRegisterDataMutation } from '@/services/query/auth'
@@ -124,6 +124,8 @@ const universityLevelOptions = Object.entries(UNIVERSITY_LEVEL).map(([value, lab
 
 const form = ref({ ...store.educational })
 
+watch(form, (value) => store.updateSection('educational', value), { deep: true })
+
 const { validate, validateAt, errors } = useYup(educationalInformationSchema)
 
 const saveRegisterMutation = useSaveRegisterDataMutation()
@@ -136,8 +138,6 @@ const onSubmit = async () => {
   store.markStepAsCompleted(STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION)
   store.goToNextStep()
 }
-
-store.updateCurrentStep(STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION)
 </script>
 
 <style lang="scss" scoped>

src/features/auth/components/studentRegister/PersonalInformation.vue

@@ -230,16 +230,15 @@ import { toast } from 'vue3-toastify'
 import useYup from '@/composables/useYup'
 import useAuth from '@/composables/useAuth'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
-import { convertToJalali } from '@/utils/date-utils'
 import { useQueryClient } from '@tanstack/vue-query'
 import TextField from '@/components/form/TextField.vue'
 import SelectField from '@/components/form/SelectField.vue'
 import LineTitleBlock from '@/components/LineTitleBlock.vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import ImageCropper from '@/components/form/ImageCropper.vue'
 import { objectToFormData } from '@/utils/object-to-formdata'
 import TextareaField from '@/components/form/TextareaField.vue'
 import DatePickerField from '@/components/form/DatePickerField.vue'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { GENDER, MARITAL_STATUS, STUDENT_REGISTRATION } from '@/enums'
 import { personalInformationSchema } from '@/features/auth/schema/student-register'
 import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
@@ -269,15 +268,14 @@ const maritalStatusOptions = Object.entries(MARITAL_STATUS).map(([value, label])
 }))
 const genderOptions = Object.entries(GENDER).map(([value, label]) => ({ value, label }))
 
-const maxBirthDate = computed(() => {
+const maxBirthDate = (() => {
   const d = new Date()
   d.setFullYear(d.getFullYear() - 15)
-  try {
+  const year = d.getFullYear()
-    return convertToJalali(d.toISOString())
+  const month = String(d.getMonth() + 1).padStart(2, '0')
-  } catch {
+  const day = String(d.getDate()).padStart(2, '0')
-    return d.toISOString()
+  return `${year}-${month}-${day}`
-  }
+})()
-})
 
 const initialPhone = ref(user.value?.phone || store.personal.phone || '')
 const initialNationalCode = ref(user.value?.nationalCode || store.personal.nationalCode || '')
@@ -305,6 +303,8 @@ const form = ref({
   avatarId: store.personal.avatarId || '',
 })
 
+watch(form, (value) => store.updateSection('personal', value), { deep: true })
+
 const avatar = ref(initialAvatar)
 
 const { validate, validateAt, errors } = useYup(personalInformationSchema)
@@ -316,8 +316,8 @@ const { data: cities = ref([]) } = useGetCitiesOfProvinceQuery(provinceIdRef, {
   enabled: () => !!provinceIdRef.value,
 })
 
-const onProvinceChange = () => {
+const onProvinceChange = (provinceId) => {
-  provinceIdRef.value = form.value.provinceId
+  provinceIdRef.value = provinceId
   form.value.cityId = null
 }
 
@@ -382,8 +382,6 @@ const onSubmit = async () => {
   store.markStepAsCompleted(STUDENT_REGISTRATION.PERSONAL_INFORMATION)
   store.goToNextStep()
 }
-
-store.updateCurrentStep(STUDENT_REGISTRATION.PERSONAL_INFORMATION)
 </script>
 
 <style lang="scss" scoped>

src/features/auth/components/studentRegister/ProfessionalInformation.vue

@@ -111,10 +111,10 @@ import SvgIcon from '@/components/icons/SvgIcon.vue'
 import TextField from '@/components/form/TextField.vue'
 import SelectField from '@/components/form/SelectField.vue'
 import LineTitleBlock from '@/components/LineTitleBlock.vue'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import TextareaField from '@/components/form/TextareaField.vue'
 import { useSaveRegisterDataMutation } from '@/services/query/auth'
 import { PROPAGATION_PLATFORM, STUDENT_REGISTRATION } from '@/enums'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
 import { professionalInformationSchema } from '@/features/auth/schema/student-register'
 import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'
@@ -150,6 +150,8 @@ const form = ref({
   onlinePlatformDetails: seedOnline,
 })
 
+watch(form, (value) => store.updateSection('professional', value), { deep: true })
+
 const hasOther = computed(() => form.value.propagationPlatforms.includes('other'))
 const hasOnline = computed(() => form.value.propagationPlatforms.includes('online'))
 
@@ -195,8 +197,6 @@ const onSubmit = async () => {
   store.markStepAsCompleted(STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION)
   store.goToNextStep()
 }
-
-store.updateCurrentStep(STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION)
 </script>
 
 <style lang="scss" scoped>

src/features/auth/components/studentRegister/SideBarSteps.vue

@@ -7,33 +7,57 @@
       <div class="sidebar-steps__logo">
         <img :src="logoWhite" alt="مدرسه بانو" />
       </div>
-      <ul class="sidebar-steps__list">
+      <ul ref="stepsList" class="sidebar-steps__list scrollbar-thin">
-        <li
+        <li v-for="tab in tabs" :key="tab.step" class="sidebar-steps__item">
-          v-for="tab in tabs"
+          <button
-          :key="tab.key"
+            type="button"
-          class="sidebar-steps__item"
+            class="sidebar-steps__button"
-          :class="{ 'sidebar-steps__item--active': activeTab === tab.key }"
+            :class="{
-          @click="emit('update:active-tab', tab.key)"
+              'sidebar-steps__button--active': activeStep === tab.step,
-        >
+              'sidebar-steps__button--completed': tab.completed,
-          <SvgIcon :name="tab.icon" :size="22" color="#fff" />
+            }"
+            :disabled="tab.disabled"
+            :aria-label="`${tab.title}، مرحله ${tab.step}`"
+            :aria-current="activeStep === tab.step ? 'step' : undefined"
+            @click="emit('select-step', tab.step)"
+          >
+            <span class="sidebar-steps__icon">
+              <SvgIcon :name="tab.completed ? 'check-square' : tab.icon" :size="20" color="#fff" />
+            </span>
+            <span class="sidebar-steps__label">{{ tab.title }}</span>
+            <span class="sidebar-steps__number">{{ tab.step }}</span>
+          </button>
         </li>
       </ul>
-      <SidebarLogout color="#fff" stacked />
+      <div class="sidebar-steps__logout">
+        <SidebarLogout color="#fff" />
+      </div>
     </div>
   </aside>
 </template>
 
 <script setup>
 import { gallery } from '@/utils/gallery'
+import { nextTick, ref, watch } from 'vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import SidebarLogout from '@/layouts/sidebars/SidebarLogout.vue'
 
-defineProps({
+const props = defineProps({
   tabs: { type: Array, required: true },
-  activeTab: { type: String, default: '' },
+  activeStep: { type: Number, default: 1 },
 })
 
-const emit = defineEmits(['update:active-tab'])
+const emit = defineEmits(['select-step'])
+const stepsList = ref(null)
+
+const scrollActiveStepIntoView = async () => {
+  await nextTick()
+  stepsList.value
+    ?.querySelector('[aria-current="step"]')
+    ?.scrollIntoView({ block: 'nearest', inline: 'center' })
+}
+
+watch(() => props.activeStep, scrollActiveStepIntoView, { immediate: true })
 
 const logoWhite = gallery.logoWhite
 const logoPinkishRed = gallery.logoPinkishRed
@@ -67,14 +91,11 @@ const logoPinkishRed = gallery.logoPinkishRed
     gap: 1rem;
 
     @media (min-width: 1024px) {
-      // Fill the full-height column only on desktop; on mobile the panel is a
-      // content-height bar, so height:100% would overflow past the logo above it
-      // and collide with the page heading.
       height: 100%;
       flex-direction: column;
-      align-items: center;
+      align-items: stretch;
-      gap: 1.5rem;
+      gap: 1rem;
-      padding: 1.25rem 0.75rem;
+      padding: 1.25rem 0.875rem;
       border-radius: 1.5rem;
     }
   }
@@ -101,30 +122,127 @@ const logoPinkishRed = gallery.logoPinkishRed
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
-    gap: 1rem;
+    gap: 0.375rem;
     flex: 1;
+    min-width: 0;
+    overflow-x: auto;
 
     @media (min-width: 1024px) {
       flex-direction: column;
       justify-content: flex-start;
-      gap: 1.25rem;
+      gap: 0.25rem;
-      padding-top: 1rem;
+      padding-top: 0.5rem;
+      overflow: hidden auto;
     }
   }
 
   &__item {
-    cursor: pointer;
+    flex: 0 0 auto;
-    opacity: 0.5;
+    min-width: 0;
-    transition: opacity 0.15s ease;
+
+    @media (min-width: 1024px) {
+      width: 100%;
+    }
+  }
+
+  &__button {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.25rem;
+    gap: 0.5rem;
+    width: 2.75rem;
+    min-height: 2.75rem;
+    padding: 0.375rem;
+    border: 1px solid transparent;
+    border-radius: 0.875rem;
+    background: transparent;
+    color: #fff;
+    cursor: pointer;
+    opacity: 0.62;
+    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 
-    &--active,
+    @media (min-width: 1024px) {
-    &:hover {
+      justify-content: flex-start;
+      width: 100%;
+      padding: 0.5rem 0.625rem;
+    }
+
+    &:hover:not(:disabled),
+    &--active {
       opacity: 1;
+      background: rgba(255, 255, 255, 14%);
+      border-color: rgba(255, 255, 255, 22%);
+    }
+
+    &--completed {
+      &:not(.sidebar-steps__button--active) {
+        opacity: 0.85;
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.32;
+    }
+  }
+
+  &__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  &__label {
+    display: none;
+    min-width: 0;
+    overflow: hidden;
+    font-family: var(--font-family-fa);
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @media (min-width: 1024px) {
+      display: block;
+    }
+  }
+
+  &__number {
+    display: none;
+    margin-inline-start: auto;
+    font-family: var(--font-family-number-fa);
+    font-size: 0.75rem;
+    opacity: 0.75;
+
+    @media (min-width: 1024px) {
+      display: inline;
+    }
+  }
+
+  &__logout {
+    flex: 0 0 auto;
+
+    :deep(.sidebar-logout) {
+      padding: 0.25rem;
+    }
+
+    :deep(.sidebar-logout__labels) {
+      display: none;
+    }
+
+    @media (min-width: 1024px) {
+      border-top: 1px solid rgba(255, 255, 255, 20%);
+      padding-top: 0.5rem;
+
+      :deep(.sidebar-logout) {
+        justify-content: flex-start;
+        width: 100%;
+        padding: 0.5rem 0.625rem;
+      }
+
+      :deep(.sidebar-logout__labels) {
+        display: flex;
+      }
     }
   }
 }

src/features/auth/components/studentRegister/SkillAssessmentPart5.vue

@@ -43,7 +43,7 @@
     </div>
 
     <div class="skill-five__divider" />
-    <StepActions @back="store.goToPrevStep()" />
+    <StepActions :loading="saveRegisterMutation.isPending.value" @back="store.goToPrevStep()" />
   </form>
 </template>
 
@@ -51,9 +51,10 @@
 import useYup from '@/composables/useYup'
 import { STUDENT_REGISTRATION } from '@/enums'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import LineTitleBlock from '@/components/LineTitleBlock.vue'
 import TextareaField from '@/components/form/TextareaField.vue'
+import { useSaveRegisterDataMutation } from '@/services/query/auth'
 import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
 import { skillAssessmentPart5Schema } from '@/features/auth/schema/student-register'
 import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'
@@ -69,17 +70,19 @@ onBeforeUnmount(() => window.removeEventListener('resize', onResize))
 
 const form = ref({ ...store.skill5 })
 
+watch(form, (value) => store.updateSection('skill5', value), { deep: true })
+
 const { validate, validateAt, errors } = useYup(skillAssessmentPart5Schema)
+const saveRegisterMutation = useSaveRegisterDataMutation()
 
 const onSubmit = async () => {
   const { isValid, payload } = await validate(form.value)
   if (!isValid) return
+  await saveRegisterMutation.mutateAsync(payload)
   store.skill5 = { ...store.skill5, ...payload }
   store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_5)
   store.goToNextStep()
 }
-
-store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_5)
 </script>
 
 <style lang="scss" scoped>

src/features/auth/components/studentRegister/SkillAssessmentPart6.vue

@@ -10,7 +10,6 @@
           purpose="voice"
           :max-seconds="180"
           :error="errors.faithProductionAudio"
-          @uploaded="onUploaded"
         />
       </div>
       <div class="skill-six__content-col">
@@ -23,7 +22,8 @@
           <video :src="videoUrl" controls playsinline class="skill-six__video" />
         </div>
         <div v-else class="skill-six__video-placeholder">
-          <p>ویدیویی در دسترس نیست</p>
+          <p>ویدیوی راهنما هنوز بارگذاری نشده است.</p>
+          <p>تا زمان انتشار ویدیو، ارسال پاسخ در این مرحله اختیاری است.</p>
         </div>
       </div>
     </div>
@@ -34,8 +34,8 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
 import useYup from '@/composables/useYup'
+import { computed, ref, watch } from 'vue'
 import { STUDENT_REGISTRATION } from '@/enums'
 import LineTitleBlock from '@/components/LineTitleBlock.vue'
 import { useSaveRegisterDataMutation } from '@/services/query/auth'
@@ -55,10 +55,12 @@ const form = ref({
 
 const { validate, errors } = useYup(skillAssessmentPart6Schema)
 
-const onUploaded = (value) => {
+watch(audio, (value) => {
   form.value.faithProductionAudio = value
   form.value.faithProductionId = value?.uploadId || ''
-}
+})
+
+watch(form, (value) => store.updateSection('skill6', value), { deep: true })
 
 const videoUrl = computed(() => store.registrationMedia.faithProductionVideoUrl || '')
 
@@ -72,8 +74,6 @@ const onSubmit = async () => {
   store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6)
   store.goToNextStep()
 }
-
-store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6)
 </script>
 
 <style lang="scss" scoped>
@@ -107,8 +107,8 @@ store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6)
 
   &__intro {
     font-family: var(--font-family-fa);
-    font-weight: 300;
+    font-weight: 400;
-    font-size: 0.875rem;
+    font-size: 0.9375rem;
     line-height: 1.7;
     margin: 0 0 0.75rem;
     text-align: justify;
@@ -130,11 +130,16 @@ store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6)
   &__video-placeholder {
     border-radius: 1rem;
     background: #f3f4f6;
-    color: var(--color-thd-gray);
+    color: #666;
     padding: 2rem;
     text-align: center;
     font-family: var(--font-family-fa);
-    font-size: 0.875rem;
+    font-size: 0.9375rem;
+    font-weight: 400;
+
+    p + p {
+      margin-top: 0.5rem;
+    }
   }
 
   &__divider {

src/features/auth/components/studentRegister/SkillAssessmentPart7.vue

@@ -9,7 +9,6 @@
           context="verification"
           :max-seconds="180"
           :error="errors.leaderMessageVideo"
-          @uploaded="onUploaded"
         />
       </div>
       <div class="skill-seven__content-col">
@@ -22,7 +21,8 @@
           <video :src="videoUrl" controls playsinline class="skill-seven__video" />
         </div>
         <div v-else class="skill-seven__video-placeholder">
-          <p>ویدیویی در دسترس نیست</p>
+          <p>ویدیوی راهنما هنوز بارگذاری نشده است.</p>
+          <p>تا زمان انتشار ویدیو، ارسال پاسخ در این مرحله اختیاری است.</p>
         </div>
       </div>
     </div>
@@ -37,9 +37,9 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
 import { toast } from 'vue3-toastify'
 import useYup from '@/composables/useYup'
+import { computed, ref, watch } from 'vue'
 import { STUDENT_REGISTRATION } from '@/enums'
 import LineTitleBlock from '@/components/LineTitleBlock.vue'
 import { useSaveRegisterDataMutation } from '@/services/query/auth'
@@ -59,10 +59,12 @@ const form = ref({
 
 const { validate, errors } = useYup(skillAssessmentPart7Schema)
 
-const onUploaded = (value) => {
+watch(video, (value) => {
   form.value.leaderMessageVideo = value
   form.value.leaderMessageId = value?.uploadId || ''
-}
+})
+
+watch(form, (value) => store.updateSection('skill7', value), { deep: true })
 
 const videoUrl = computed(() => store.registrationMedia.leaderMessageVideoUrl || '')
 
@@ -80,8 +82,6 @@ const onSubmit = async () => {
     toast.error(error?.response?.data?.message || 'عملیات با خطا مواجه شد')
   }
 }
-
-store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7)
 </script>
 
 <style lang="scss" scoped>
@@ -115,8 +115,8 @@ store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7)
 
   &__intro {
     font-family: var(--font-family-fa);
-    font-weight: 300;
+    font-weight: 400;
-    font-size: 0.875rem;
+    font-size: 0.9375rem;
     line-height: 1.7;
     margin: 0 0 0.75rem;
     text-align: justify;
@@ -138,11 +138,16 @@ store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7)
   &__video-placeholder {
     border-radius: 1rem;
     background: #f3f4f6;
-    color: var(--color-thd-gray);
+    color: #666;
     padding: 2rem;
     text-align: center;
     font-family: var(--font-family-fa);
-    font-size: 0.875rem;
+    font-size: 0.9375rem;
+    font-weight: 400;
+
+    p + p {
+      margin-top: 0.5rem;
+    }
   }
 
   &__divider {

src/features/auth/components/studentRegister/SkillSelectStep.vue

@@ -42,9 +42,9 @@ import useYup from '@/composables/useYup'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import SelectField from '@/components/form/SelectField.vue'
 import LineTitleBlock from '@/components/LineTitleBlock.vue'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import TextareaField from '@/components/form/TextareaField.vue'
 import { useSaveRegisterDataMutation } from '@/services/query/auth'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
 import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'
 
@@ -73,6 +73,8 @@ const form = ref({
   [props.descField]: seed[props.descField] || '',
 })
 
+watch(form, (value) => store.updateSection(props.storeKey, value), { deep: true })
+
 const hasOther = computed(() => form.value[props.selectField] === 'other')
 
 const onSelect = () => {
@@ -91,8 +93,6 @@ const onSubmit = async () => {
   store.markStepAsCompleted(props.step)
   store.goToNextStep()
 }
-
-store.updateCurrentStep(props.step)
 </script>
 
 <style lang="scss" scoped>
@@ -115,8 +115,8 @@ store.updateCurrentStep(props.step)
 
     p {
       font-family: var(--font-family-fa);
-      font-weight: 300;
+      font-weight: 400;
-      font-size: 0.875rem;
+      font-size: 0.9375rem;
       line-height: 1.7;
       color: #a7a7a7;
       text-align: justify;

src/features/auth/components/studentRegister/StepActions.vue

@@ -45,21 +45,27 @@ const emit = defineEmits(['back'])
 <style lang="scss" scoped>
 .step-actions {
   display: flex;
-  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
 
   &__back {
-    flex: 1 1 60%;
+    flex: 1 1 10rem;
+    min-width: 0;
     display: flex;
     justify-content: flex-start;
   }
 
   &__next {
-    flex: 1 1 40%;
+    flex: 1 1 12rem;
+    min-width: 0;
     max-width: 16rem;
     margin-inline-start: auto;
 
-    @media (min-width: 768px) {
+    @media (max-width: 767px) {
-      flex: 0 0 16rem;
+      order: -1;
+      flex-basis: 100%;
+      max-width: none;
     }
   }
 
@@ -67,10 +73,17 @@ const emit = defineEmits(['back'])
     color: #969696;
     padding: 0 1rem;
     width: fit-content;
+    font-weight: 500;
   }
 
   &__next-btn {
     width: 100%;
+    min-height: 2.65rem;
+    font-weight: 500;
+  }
+
+  :deep(.base-button__text) {
+    font-size: 0.9375rem;
   }
 }
 </style>

src/features/auth/pages/StudentRegisterPage.vue

@@ -2,16 +2,26 @@
   <div class="student-register">
     <div class="student-register__container">
       <aside class="student-register__sidebar">
-        <SideBarSteps :tabs="tabs" :active-tab="activeTab" @update:active-tab="goToStep" />
+        <SideBarSteps :tabs="tabs" :active-step="store.currentStep" @select-step="goToStep" />
       </aside>
 
       <main class="student-register__main">
         <header class="student-register__heading">
+          <div class="student-register__step-meta">
+            <span>مرحله {{ currentStepNumber }} از {{ totalSteps }}</span>
+            <span>{{ progressPercent }}٪</span>
+          </div>
+          <div class="student-register__progress" aria-hidden="true">
+            <span :style="{ width: `${progressPercent}%` }" />
+          </div>
           <h1 class="student-register__title">{{ stepLabel.title }}</h1>
           <p class="student-register__desc">{{ stepLabel.desc }}</p>
         </header>
 
-        <component :is="currentComponent" />
+        <div v-if="isRegistrationDataPending" class="student-register__loading" aria-live="polite">
+          در حال بازیابی اطلاعات ثبت‌نام…
+        </div>
+        <component :is="currentComponent" v-else />
       </main>
     </div>
 
@@ -23,10 +33,10 @@
 import useModal from '@/composables/useModal'
 import { computed, markRaw, watch } from 'vue'
 import { STUDENT_REGISTRATION } from '@/enums'
-import { useGetRegisterDataQuery } from '@/services/query/auth'
 import SideBarSteps from '@/features/auth/components/studentRegister/SideBarSteps.vue'
 import SuccessModal from '@/features/auth/components/studentRegister/SuccessModal.vue'
 import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'
+import { useGetRegisterDataQuery, useGetRegistrationVideoQuery } from '@/services/query/auth'
 import PersonalInformation from '@/features/auth/components/studentRegister/PersonalInformation.vue'
 import SkillAssessmentPart1 from '@/features/auth/components/studentRegister/SkillAssessmentPart1.vue'
 import SkillAssessmentPart2 from '@/features/auth/components/studentRegister/SkillAssessmentPart2.vue'
@@ -41,15 +51,21 @@ import ProfessionalInformation from '@/features/auth/components/studentRegister/
 const store = useStudentRegistrationStore()
 const { isModal, openModal } = useModal()
 
-const { data: registerData } = useGetRegisterDataQuery()
+const { data: registerData, isPending: isRegistrationDataPending } = useGetRegisterDataQuery()
 watch(
   registerData,
   (value) => {
     if (value && Object.keys(value).length > 0) store.hydrateFromRegisterData(value)
   },
-  { immediate: true }
+  { immediate: true, flush: 'sync' }
 )
 
+const { data: registrationMedia } = useGetRegistrationVideoQuery({ retry: false })
+watch(registrationMedia, (value) => store.setRegistrationMedia(value), {
+  immediate: true,
+  flush: 'sync',
+})
+
 const STEP_TO_COMPONENT = {
   [STUDENT_REGISTRATION.PERSONAL_INFORMATION]: markRaw(PersonalInformation),
   [STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION]: markRaw(EducationalInformation),
@@ -63,26 +79,6 @@ const STEP_TO_COMPONENT = {
   [STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7]: markRaw(SkillAssessmentPart7),
 }
 
-const STEP_TO_TAB = {
-  [STUDENT_REGISTRATION.PERSONAL_INFORMATION]: 'personal',
-  [STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION]: 'educational',
-  [STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION]: 'professional',
-  [STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_1]: 'skill',
-  [STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_2]: 'skill',
-  [STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_3]: 'skill',
-  [STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_4]: 'skill',
-  [STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_5]: 'skill',
-  [STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6]: 'skill',
-  [STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7]: 'skill',
-}
-
-const TAB_TO_STEP = {
-  personal: STUDENT_REGISTRATION.PERSONAL_INFORMATION,
-  educational: STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION,
-  professional: STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION,
-  skill: STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_1,
-}
-
 const STEP_LABELS = {
   [STUDENT_REGISTRATION.PERSONAL_INFORMATION]: {
     title: 'اطلاعـــــات شخصـــــی',
@@ -126,14 +122,33 @@ const STEP_LABELS = {
   },
 }
 
-const tabs = [
+const STEP_NAVIGATION = [
-  { key: 'personal', icon: 'user' },
+  { step: STUDENT_REGISTRATION.PERSONAL_INFORMATION, title: 'مشخصات فردی', icon: 'user' },
-  { key: 'educational', icon: 'book' },
+  { step: STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION, title: 'اطلاعات تحصیلی', icon: 'book' },
-  { key: 'professional', icon: 'file' },
+  { step: STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION, title: 'فعالیت‌های تبلیغی', icon: 'file' },
-  { key: 'skill', icon: 'check-square' },
+  { step: STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_1, title: 'مهارت ۱', icon: 'check-square' },
+  { step: STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_2, title: 'مهارت ۲', icon: 'check-square' },
+  { step: STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_3, title: 'مهارت ۳', icon: 'check-square' },
+  { step: STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_4, title: 'مهارت ۴', icon: 'check-square' },
+  { step: STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_5, title: 'مهارت ۵', icon: 'check-square' },
+  { step: STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6, title: 'مهارت ۶', icon: 'check-square' },
+  { step: STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7, title: 'مهارت ۷', icon: 'check-square' },
 ]
 
-const activeTab = computed(() => STEP_TO_TAB[store.currentStep] || 'personal')
+const tabs = computed(() =>
+  STEP_NAVIGATION.map((tab) => ({
+    ...tab,
+    completed: store.completedSteps.includes(tab.step),
+    disabled: !store.canGoToStep(tab.step),
+  }))
+)
+
+const totalSteps = STEP_NAVIGATION.length
+const currentStepNumber = computed(() => {
+  const index = STEP_NAVIGATION.findIndex((item) => item.step === store.currentStep)
+  return index >= 0 ? index + 1 : 1
+})
+const progressPercent = computed(() => Math.round((currentStepNumber.value / totalSteps) * 100))
 
 const currentComponent = computed(
   () =>
@@ -145,12 +160,8 @@ const stepLabel = computed(
   () => STEP_LABELS[store.currentStep] || STEP_LABELS[STUDENT_REGISTRATION.PERSONAL_INFORMATION]
 )
 
-const goToStep = (tabKey) => {
+const goToStep = (step) => {
-  const targetStep = TAB_TO_STEP[tabKey]
+  store.updateCurrentStep(step)
-  if (!targetStep) return
-  if (store.canGoToStep(targetStep)) {
-    store.updateCurrentStep(targetStep)
-  }
 }
 
 watch(
@@ -188,9 +199,8 @@ watch(
     width: 100%;
 
     @media (min-width: 1024px) {
-      width: 8.333%;
+      width: 13.5rem;
-      min-width: 5rem;
+      min-width: 13.5rem;
-      max-width: 6.5rem;
     }
   }
 
@@ -206,23 +216,97 @@ watch(
   }
 
   &__heading {
+    margin-bottom: 1.25rem;
+  }
+
+  &__step-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.375rem;
+    color: #6f6f6f;
+    font-family: var(--font-family-number-fa);
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  &__progress {
+    width: 100%;
+    height: 0.35rem;
     margin-bottom: 1rem;
+    overflow: hidden;
+    border-radius: 999px;
+    background: #f2f2f2;
+
+    span {
+      display: block;
+      height: 100%;
+      border-radius: inherit;
+      background: var(--color-primary);
+      transition: width 0.2s ease;
+    }
   }
 
   &__title {
     font-family: var(--font-family-fa);
-    font-weight: 500;
+    font-weight: 600;
-    font-size: 1.125rem;
+    font-size: 1.375rem;
-    color: #4c4c4c;
+    color: #3f3f3f;
-    margin: 0 0 0.25rem;
+    margin: 0 0 0.375rem;
   }
 
   &__desc {
     font-family: var(--font-family-fa);
     font-weight: 400;
-    font-size: 0.75rem;
+    font-size: 0.9375rem;
-    color: #adadad;
+    line-height: 1.8;
+    color: #747474;
     margin: 0;
   }
+
+  &__loading {
+    padding: 3rem 1rem;
+    color: #747474;
+    font-family: var(--font-family-fa);
+    font-size: 1rem;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  &__main :deep(.text-field__label),
+  &__main :deep(.textarea-field__label),
+  &__main :deep(.select-field__label),
+  &__main :deep(.datepicker-field__label) {
+    color: #626262;
+    font-size: 0.9375rem;
+    font-weight: 400;
+  }
+
+  &__main :deep(.text-field__input),
+  &__main :deep(.textarea-field__input),
+  &__main :deep(.select-field__trigger),
+  &__main :deep(.datepicker-field__trigger) {
+    min-height: 2.6rem;
+    font-size: 1rem;
+    font-weight: 400;
+  }
+
+  &__main :deep(.line-title__fa) {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  &__main :deep(.line-title__en) {
+    font-size: 0.8125rem;
+    font-weight: 400;
+  }
+
+  &__main :deep(.text-field__error),
+  &__main :deep(.textarea-field__error),
+  &__main :deep(.select-field__error),
+  &__main :deep(.datepicker-field__error) {
+    font-size: 0.8125rem;
+    font-weight: 400;
+  }
 }
 </style>

src/features/auth/schema/student-register.js

@@ -1,6 +1,5 @@
 import { array, mixed, number, object, string } from 'yup'
 
-import { phoneNumberRule } from '@/constants/rules/phoneNumberRule'
 import { nationalCodeRule } from '@/constants/rules/nationalCodeRule'
 
 const requiredString = (min = 0) => {
@@ -16,7 +15,9 @@ export const personalInformationSchema = object().shape({
   nationalCode: nationalCodeRule,
   maritalStatus: string().required(),
   gender: string().required(),
-  phone: phoneNumberRule,
+  // The verified phone is read-only here and may be returned in international
+  // format (for example +98912...). Do not re-validate it as a local 09 number.
+  phone: string().required(),
   provinceId: mixed().required(),
   cityId: mixed().required(),
   address: requiredString(10),
@@ -118,11 +119,11 @@ export const skillAssessmentPart5Schema = object().shape({
 })
 
 export const skillAssessmentPart6Schema = object().shape({
-  faithProductionAudio: mixed().required(),
+  faithProductionAudio: mixed().nullable().notRequired(),
   faithProductionId: mixed().notRequired(),
 })
 
 export const skillAssessmentPart7Schema = object().shape({
-  leaderMessageVideo: mixed().required(),
+  leaderMessageVideo: mixed().nullable().notRequired(),
   leaderMessageId: mixed().notRequired(),
 })

src/features/auth/store/student-registration.js

@@ -145,6 +145,21 @@ const readPersisted = () => {
   }
 }
 
+const normalizeCompletedSteps = (steps) =>
+  Array.isArray(steps) ? STUDENT_REGISTRATION_ORDER.filter((step) => steps.includes(step)) : []
+
+const firstIncompleteIndex = (steps) => {
+  const index = STUDENT_REGISTRATION_ORDER.findIndex((step) => !steps.includes(step))
+  return index === -1 ? STUDENT_REGISTRATION_ORDER.length - 1 : index
+}
+
+const resolveCurrentStep = (candidate, completed) => {
+  const candidateIndex = STUDENT_REGISTRATION_ORDER.indexOf(candidate)
+  const reachableIndex = firstIncompleteIndex(completed)
+  if (candidateIndex >= 0 && candidateIndex <= reachableIndex) return candidate
+  return STUDENT_REGISTRATION_ORDER[reachableIndex]
+}
+
 export const useStudentRegistrationStore = defineStore('studentRegistration', () => {
   const persisted = readPersisted() || {}
   const initial = { ...emptyState(), ...persisted }
@@ -160,8 +175,8 @@ export const useStudentRegistrationStore = defineStore('studentRegistration', ()
   const skill5 = ref({ ...emptyState().skill5, ...persisted.skill5 })
   const skill6 = ref({ ...emptyState().skill6, ...persisted.skill6 })
   const skill7 = ref({ ...emptyState().skill7, ...persisted.skill7 })
-  const currentStep = ref(initial.currentStep)
+  const completedSteps = ref(normalizeCompletedSteps(initial.completedSteps))
-  const completedSteps = ref(initial.completedSteps || [])
+  const currentStep = ref(resolveCurrentStep(initial.currentStep, completedSteps.value))
   const registrationMedia = ref(initial.registrationMedia || {})
 
   const sectionRefs = {
@@ -207,18 +222,33 @@ export const useStudentRegistrationStore = defineStore('studentRegistration', ()
   )
 
   const markStepAsCompleted = (stepKey) => {
-    if (!completedSteps.value.includes(stepKey)) {
+    if (STUDENT_REGISTRATION_ORDER.includes(stepKey) && !completedSteps.value.includes(stepKey)) {
       completedSteps.value = [...completedSteps.value, stepKey]
     }
   }
 
   const updateCurrentStep = (stepKey) => {
-    if (stepKey) currentStep.value = stepKey
+    if (canGoToStep(stepKey)) currentStep.value = stepKey
+  }
+
+  const updateSection = (section, value) => {
+    const target = sectionRefs[section]
+    if (!target || !value || typeof value !== 'object') return
+    target.value = { ...target.value, ...value }
+  }
+
+  const setRegistrationMedia = (value) => {
+    if (!value || typeof value !== 'object') return
+    registrationMedia.value = { ...registrationMedia.value, ...value }
   }
 
   const goToNextStep = () => {
     const idx = STUDENT_REGISTRATION_ORDER.indexOf(currentStep.value)
-    if (idx >= 0 && idx < STUDENT_REGISTRATION_ORDER.length - 1) {
+    if (
+      idx >= 0 &&
+      idx < STUDENT_REGISTRATION_ORDER.length - 1 &&
+      completedSteps.value.includes(currentStep.value)
+    ) {
       currentStep.value = STUDENT_REGISTRATION_ORDER[idx + 1]
     }
   }
@@ -229,9 +259,8 @@ export const useStudentRegistrationStore = defineStore('studentRegistration', ()
   }
 
   const canGoToStep = (stepKey) => {
-    const currentIndex = STUDENT_REGISTRATION_ORDER.indexOf(currentStep.value)
     const targetIndex = STUDENT_REGISTRATION_ORDER.indexOf(stepKey)
-    return targetIndex <= currentIndex + 1
+    return targetIndex >= 0 && targetIndex <= firstIncompleteIndex(completedSteps.value)
   }
 
   const buildCompletePayload = () => ({
@@ -307,6 +336,8 @@ export const useStudentRegistrationStore = defineStore('studentRegistration', ()
     registrationMedia,
     markStepAsCompleted,
     updateCurrentStep,
+    updateSection,
+    setRegistrationMedia,
     goToNextStep,
     goToPrevStep,
     canGoToStep,

src/features/student/sessions/pages/StudentSessionDetailsPage.vue

@@ -31,10 +31,7 @@
             />
           </div>
           <div v-else-if="contentKind === 'audio'" class="ssd__audio">
-            <VoiceRecorder
+            <VoiceRecorder :model-value="session?.audioUrl" disabled />
-              :model-value="session?.audioUrl"
-              disabled
-            />
           </div>
           <div v-else-if="contentKind === 'text'" class="ssd__text">
             <SvgIcon name="warning" :size="22" color="#b8b8b8" class="ssd__text-icon" />

src/services/mock/fixtures/me.js

@@ -18,7 +18,7 @@ export const currentMe = {
   lastName: 'محمدی',
   fullName: 'سجاد محمدی',
   phoneNumber: '09123456789',
-  nationalCode: '0079827498',
+  nationalCode: '0079827497',
   status: 'approved',
   address: {
     address: 'خیابان آزادی، پلاک ۱۲',

src/services/mock/routes/auth.js

@@ -4,6 +4,7 @@ import { endpoints } from '@/services/api/endpoints'
 import { currentMe } from '@/services/mock/fixtures/me'
 
 const fakeToken = 'mock-token-1234567890'
+let registerData = {}
 
 register('POST', endpoints.login, () => ({
   data: { user: currentMe, token: fakeToken },
@@ -86,6 +87,13 @@ register('POST', endpoints.completeProfile, ({ data }) => ({
   data: { user: { ...currentMe, ...data } },
 }))
 
+register('GET', endpoints.registerData, () => ({ data: registerData }))
+
+register('POST', endpoints.registerData, ({ data }) => {
+  registerData = { ...registerData, ...data?.data }
+  return { data: registerData }
+})
+
 register('GET', endpoints.getRegistrationQuestionVideo, () => ({
   data: { url: '', id: 0 },
 }))

src/services/query/auth.js

@@ -60,10 +60,21 @@ export const useCompleteProfileMutation = () => useMutation({ mutationFn: apiCom
 
 export const useUpdateProfileMutation = () => useMutation({ mutationFn: apiUpdateProfile })
 
+const getRegistrationVideoIfAvailable = async () => {
+  try {
+    return await apiGetRegistrationQuestionVideo()
+  } catch (error) {
+    // The migrated backend does not expose this optional content endpoint yet.
+    // Treat a missing route as "no tutorial uploaded" so registration remains usable.
+    if (error?.response?.status === 404) return {}
+    throw error
+  }
+}
+
 export const useGetRegistrationVideoQuery = (options = {}) =>
   useQuery({
     queryKey: authKeys.registrationVideo(),
-    queryFn: () => apiGetRegistrationQuestionVideo(),
+    queryFn: getRegistrationVideoIfAvailable,
     select: (response) => response?.data ?? response,
     ...options,
   })

src/utils/date-convertor.js

@@ -35,8 +35,7 @@ export function gregorianToJalaliString(isoString, separator = '/', persianDigit
       jd = jd.replace(/\d/g, (d) => enToFa[d])
     }
     return `${jy}${separator}${jm}${separator}${jd}`
-  } catch (error) {
+  } catch {
-    console.error('Date conversion error:', error)
     return ''
   }
 }
@@ -83,8 +82,7 @@ export function gregorianToJalaliStringLong(isoString, separator = '/', persianD
     }
 
     return ` ${jy}${separator}${jm}${separator}${jd}، ${hh}:${mm}`
-  } catch (error) {
+  } catch {
-    console.error('Date conversion error:', error)
     return ''
   }
 }
@@ -98,8 +96,7 @@ export function JalaliToGregorianString(jalaliStr) {
       2,
       '0'
     )}T00:00:00.000Z`
-  } catch (error) {
+  } catch {
-    console.log('Jalali to Gregorian conversion error:', error)
     return ''
   }
 }
@@ -119,8 +116,7 @@ export function JalaliToGregorianStringWithTime(jalaliDateTimeStr) {
       2,
       '0'
     )}T${timePart}:00.000Z`
-  } catch (error) {
+  } catch {
-    console.log('Jalali to Gregorian with time conversion error:', error)
     return ''
   }
 }