fix: bugs

src/features/admin/services/components/modals/SendMessageModal.vue

@@ -35,7 +35,6 @@
             v-model="form.description"
             name="description"
             label="توضیحات خود را وارد کنید"
-            placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
             :row="4"
           />
         </div>

src/features/auth/components/AuthHeading.vue

@@ -2,7 +2,11 @@
   <div class="auth-heading">
     <img :src="logo" alt="banu" class="auth-heading__logo" />
     <h2 class="auth-heading__title">{{ title }}</h2>
-    <p v-if="subtitle" class="auth-heading__subtitle">
+    <p v-if="step === 'otp'" class="auth-heading__subtitle">
+      <span class="auth-heading__phone-label">ارسال کد فعال‌سازی به شماره</span>
+      <span class="auth-heading__phone">{{ phoneNumber || '*******' }}</span>
+    </p>
+    <p v-else-if="subtitle" class="auth-heading__subtitle">
       <slot name="subtitle">{{ subtitle }}</slot>
     </p>
     <slot name="below" />
@@ -15,6 +19,8 @@ import { gallery } from '@/utils/gallery'
 defineProps({
   title: { type: String, required: true },
   subtitle: { type: String, default: '' },
+  step: { type: String, default: '' },
+  phoneNumber: { type: String, default: '' },
 })
 
 const logo = gallery.authLogo
@@ -49,5 +55,18 @@ const logo = gallery.authLogo
     color: #a7a7a7;
     margin: 0.25rem 0 0;
   }
+
+  &__phone-label {
+    padding-inline-end: 0.75rem;
+    color: #a7a7a7;
+    font-family: var(--font-family-fa);
+    border-left: 1px solid #a7a7a7;
+  }
+
+  &__phone {
+    padding-inline-start: 0.75rem;
+    color: var(--color-prim-gray);
+    font-family: var(--font-family-number-fa);
+  }
 }
 </style>

src/features/auth/components/LoginForm.vue

@@ -18,9 +18,6 @@
       </TextField>
 
       <div class="login-form__password-wrap">
-        <button type="button" class="login-form__forgot" @click="goForgotPassword">
-          رمز عبور خودم را فراموش کرده ام
-        </button>
         <PasswordField
           v-model="form.password"
           name="password"
@@ -30,6 +27,10 @@
         />
       </div>
 
+      <button type="button" class="login-form__forgot" @click="goForgotPassword">
+        رمز عبور خودم را فراموش کرده ام
+      </button>
+
       <BaseButton
         type="submit"
         text="تایید اطلاعات"
@@ -138,9 +139,7 @@ const goForgotPassword = () => emit('next', { mode: 'forgotPassword' })
 }
 
 .login-form__forgot {
-  position: absolute;
-  inset-inline-start: 0;
-  top: -0.25rem;
+  width: 100%;
   z-index: 10;
   background: transparent;
   border: none;
@@ -149,6 +148,7 @@ const goForgotPassword = () => emit('next', { mode: 'forgotPassword' })
   font-weight: 500;
   font-size: 0.75rem;
   color: var(--color-prim-gray);
+  text-align: right;
 
   &:hover {
     text-decoration: underline;
@@ -168,15 +168,19 @@ const goForgotPassword = () => emit('next', { mode: 'forgotPassword' })
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 0.5rem;
+
+  @media (min-width: 768px) {
+    margin-top: auto;
+  }
 }
 
 .login-form__link {
   display: inline-flex;
-  align-items: center;
   gap: 0.25rem;
   font-family: var(--font-family-fa);
   font-size: 0.75rem;
   color: #a7a7a7;
+  align-items: start;
 
   a {
     color: var(--color-sec-gray);

src/features/auth/components/LoginWithVerifyCodeForm.vue

@@ -35,9 +35,11 @@
         </template>
       </BaseButton>
 
-      <button type="button" class="login-otp__back" @click="emit('back')">
-        بازگشت به ورود با رمز عبور
-      </button>
+      <div class="login-otp__links">
+        <button type="button" class="login-otp__back" @click="emit('back')">
+          بازگشت به ورود با رمز عبور
+        </button>
+      </div>
     </div>
 
     <div class="auth-form__footer">
@@ -124,8 +126,18 @@ const onSubmit = async () => {
   width: 100%;
 }
 
+.login-otp__links {
+  margin-top: 1.5rem;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+
+  @media (min-width: 768px) {
+    margin-top: auto;
+  }
+}
+
 .login-otp__back {
-  margin-top: 1rem;
   background: transparent;
   border: none;
   cursor: pointer;

src/features/auth/components/PatternSection.vue

@@ -26,7 +26,7 @@ defineProps({
     height: 100dvh;
     background-size: contain;
     background-position-x: right;
-    background-repeat: no-repeat;
+    background-repeat: repeat;
 
     @media (min-width: 768px) {
       flex-basis: 66.6667%;

src/features/auth/components/SignupForm.vue

@@ -160,7 +160,7 @@ const onSubmit = async () => {
 }
 
 .signup-form__login-link {
-  margin-top: 1rem;
+  margin-top: 1.5rem;
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -168,6 +168,10 @@ const onSubmit = async () => {
   font-size: 0.75rem;
   color: #a7a7a7;
 
+  @media (min-width: 768px) {
+    margin-top: auto;
+  }
+
   a {
     color: var(--color-sec-gray);
     text-decoration: underline;

src/features/auth/components/VerifyCodeForm.vue

@@ -1,11 +1,7 @@
 <template>
   <form class="auth-form" @submit.prevent="onSubmit">
     <div class="auth-form__body">
-      <AuthHeading title="کد تایید">
-        <template #subtitle>
-          <span class="verify__phone-label">ارسال کد فعال‌سازی به شماره</span>
-          <span class="verify__phone">{{ phoneNumber || '*******' }}</span>
-        </template>
+      <AuthHeading title="کد تایید" step="otp" :phone-number="phoneNumber">
         <template #below>
           <button type="button" class="verify__resend" @click="onResend" :disabled="resending">
             {{ resending ? 'در حال ارسال...' : 'ارسال مجدد کد تایید' }}
@@ -33,9 +29,20 @@
         </template>
       </BaseButton>
 
-      <button type="button" class="verify__back" @click="emit('back')">
-        تغییر شماره تلفن همراه
-      </button>
+      <div class="verify__links">
+        <div class="verify__link">
+          <SvgIcon name="user" :size="12" color="#A7A7A7" />
+          <button type="button" class="verify__link-btn" @click="emit('password-login')">
+            ورود با رمز عبور
+          </button>
+        </div>
+        <div class="verify__link">
+          <SvgIcon name="phone" :size="12" color="#A7A7A7" />
+          <button type="button" class="verify__link-btn" @click="emit('back')">
+            تغییر شماره تلفن همراه
+          </button>
+        </div>
+      </div>
     </div>
 
     <div class="auth-form__footer">
@@ -71,7 +78,7 @@ const props = defineProps({
   mode: { type: String, default: 'loginWithCode' },
 })
 
-const emit = defineEmits(['back', 'verified'])
+const emit = defineEmits(['back', 'verified', 'password-login'])
 
 const schema = verifyCodeSchema
 const form = ref({ code: '' })
@@ -170,18 +177,6 @@ const onResend = async () => {
   }
 }
 
-.verify__phone-label {
-  padding-inline-end: 0.75rem;
-  color: #a7a7a7;
-  font-family: var(--font-family-fa);
-}
-
-.verify__phone {
-  padding-inline-start: 0.75rem;
-  color: var(--color-prim-gray);
-  font-family: var(--font-family-number-fa);
-}
-
 .verify__resend {
   margin-top: 0.5rem;
   background: transparent;
@@ -205,14 +200,36 @@ const onResend = async () => {
   width: 100%;
 }
 
-.verify__back {
-  margin-top: 1rem;
+.verify__links {
+  margin-top: 1.5rem;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+
+  @media (min-width: 768px) {
+    margin-top: auto;
+  }
+}
+
+.verify__link {
+  display: inline-flex;
+  align-items: start;
+  gap: 0.25rem;
+  font-family: var(--font-family-fa);
+  font-size: 0.75rem;
+  color: #a7a7a7;
+}
+
+.verify__link-btn {
   background: transparent;
   border: none;
   cursor: pointer;
   font-family: var(--font-family-fa);
   font-size: 0.75rem;
   color: #a7a7a7;
+  padding: 0;
 
   &:hover {
     text-decoration: underline;

src/features/auth/pages/LoginPage.vue

@@ -12,6 +12,7 @@
       :phone-number="phoneNumber"
       :mode="mode"
       @back="step = LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE"
+      @password-login="step = LOGIN_STEPS.LOGIN"
     />
   </AuthShell>
 </template>
@@ -33,7 +34,7 @@ const handleNext = ({ mode: newMode }) => {
   step.value = LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE
 }
 
-const handleCodeSent = ({ phoneNumber: phone, mode: newMode }) => {
+const handleCodeSent = ({ phone, mode: newMode }) => {
   phoneNumber.value = phone
   mode.value = newMode
   step.value = LOGIN_STEPS.VERIFY_CODE

src/features/auth/pages/SignupPage.vue

@@ -7,6 +7,7 @@
       mode="signup"
       @back="step = SIGNUP_STEPS.SIGNUP"
       @verified="handleVerified"
+      @password-login="router.push({ name: 'login' })"
     />
   </AuthShell>
 </template>

src/features/student/certificates/pages/StudentCertificatesPage.vue

@@ -6,7 +6,7 @@
       desc="در این قسمت شما میتوانید گواهینامه هر دوره ای را که گذرانده اید را مشاهده کنید."
     >
       <template #icon>
-        <SvgIcon name="scroll" :size="24" color="var(--color-primary)" />
+        <SvgIcon name="certificate" :size="24" color="var(--color-primary)" />
       </template>
     </BoxedIconTitleBlock>
 

src/features/student/consultants/components/RequestConsultantForm.vue

@@ -19,7 +19,6 @@
             v-model="form.message"
             name="message"
             label="توضیحات خود را وارد نمایید"
-            placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
             :row="5"
             :error="errors.message"
           />
@@ -118,11 +117,7 @@ const onSubmit = async () => {
 
   &__actions {
     display: flex;
-    justify-content: center;
-
-    @media (min-width: 768px) {
-      justify-content: flex-end;
-    }
+    justify-content: flex-end;
   }
 
   &__submit {

src/features/student/consultants/pages/StudentConsultantsPage.vue

@@ -6,7 +6,7 @@
       desc="درخواست مشاوره جدید ثبت کنید یا تاریخچه مشاوره‌های خود را مشاهده نمایید."
     >
       <template #icon>
-        <SvgIcon name="chat" :size="24" color="var(--color-primary)" />
+        <img :src="chatsImage" alt="مشاوره" class="student-consultants__heading-img" />
       </template>
     </BoxedIconTitleBlock>
 
@@ -37,10 +37,10 @@ import { computed, ref } from 'vue'
 import { toast } from 'vue3-toastify'
 import { TICKET_STATUS } from '@/enums'
 import { useQueryClient } from '@tanstack/vue-query'
-import SvgIcon from '@/components/icons/SvgIcon.vue'
 import NoItems from '@/components/blocks/NoItems.vue'
 import { formatJalaaliDate } from '@/utils/date-utils'
 import TabsBlock from '@/components/blocks/TabsBlock.vue'
+import chatsImage from '@/assets/images/tickets/chats.png'
 import { usePagination } from '@/composables/usePagination'
 import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
 import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
@@ -130,5 +130,11 @@ const onShowDetails = () => {}
   &__heading {
     margin-bottom: 0.75rem;
   }
+
+  &__heading-img {
+    width: 1.75rem;
+    height: 1.75rem;
+    object-fit: contain;
+  }
 }
 </style>

src/features/student/courses/pages/StudentCoursesPage.vue

@@ -58,8 +58,8 @@ import StudentCourseItem from '@/features/student/courses/components/StudentCour
 const router = useRouter()
 
 const tabs = [
-  { name: 'current', label: 'در حال گذراندن', icon: 'list-bullets' },
-  { name: 'ended', label: 'تکمیل شده', icon: 'list-bullets' },
+  { name: 'current', label: 'در حال گذراندن', icon: 'play' },
+  { name: 'ended', label: 'تکمیل شده', icon: 'check-circle' },
 ]
 const activeTab = ref('current')
 

src/features/student/profile/pages/EditProfilePage.vue

@@ -6,7 +6,7 @@
       desc="در این قسمت می‌توانید پروفایل خود را به‌روز کنید."
     >
       <template #icon>
-        <SvgIcon name="user" :size="24" color="var(--color-primary)" />
+        <SvgIcon name="user-circle-check" :size="24" color="var(--color-primary)" />
       </template>
     </BoxedIconTitleBlock>
 
@@ -17,6 +17,7 @@
             v-model="avatar"
             name="avatar"
             bg-color="#eeeeee"
+            helper-text="برای آپلود تصویر جدید لطفا روی دکمه بالا کلیک کنید."
             @crop="onAvatarCropped"
             @error="onAvatarError"
           />
@@ -405,34 +406,36 @@ const onCancel = () => router.push({ name: 'student-dashboard' })
   }
 
   &__grid {
-    display: grid;
-    grid-template-columns: 1fr;
+    display: flex;
+    flex-direction: column;
     gap: 1rem;
 
     @media (min-width: 1024px) {
-      grid-template-columns: 4fr 8fr;
+      display: grid;
+      grid-template-columns: 8fr 4fr;
     }
 
     @media (min-width: 1280px) {
-      grid-template-columns: 3fr 9fr;
+      display: grid;
+      grid-template-columns: 9fr 3fr;
     }
   }
 
   &__avatar-col {
-    order: 2;
+    order: 1;
 
     @media (min-width: 1024px) {
-      order: 1;
+      order: 2;
       padding: 0.5rem;
     }
   }
 
   &__main-col {
-    order: 1;
+    order: 2;
 
     @media (min-width: 1024px) {
-      order: 2;
-      padding-inline-start: 1.25rem;
+      order: 1;
+      padding-inline-end: 1.25rem;
     }
   }
 

src/features/student/services/components/CreateServiceForm.vue

@@ -28,7 +28,6 @@
             v-model="form.message"
             name="message"
             label="توضیحات خود را وارد نمایید"
-            placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
             :row="5"
             :error="errors.message"
           />
@@ -210,7 +209,7 @@ const onSubmit = async () => {
     gap: 1rem;
 
     @media (min-width: 768px) {
-      grid-template-columns: 1fr 1fr;
+      grid-template-columns: repeat(12, 1fr);
     }
   }
 
@@ -218,6 +217,10 @@ const onSubmit = async () => {
     display: flex;
     flex-direction: column;
 
+    @media (min-width: 768px) {
+      grid-column: span 3;
+    }
+
     &--full {
       grid-column: 1 / -1;
     }

src/features/student/terms/pages/StudentTermsPage.vue

@@ -21,7 +21,7 @@
             @show-details="onShowDetails"
           />
         </div>
-        <NoItems v-else title="ترم‌ای نیست" desc="در حال حاضر ترم‌ای در حال گذراندن ندارید." />
+        <NoItems v-else title="ترمی نیست" desc="در حال حاضر ترمی در حال گذراندن ندارید." />
         <PaginationBlock :pagination="currentMeta" @update:page="setCurrentPage" />
       </template>
 

src/features/student/tickets/components/TicketItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ticket-item">
+  <div class="ticket-item" :class="{ 'ticket-item--clickable': isMobile }" @click="onItemClick">
     <div class="ticket-item__user">
       <div v-if="ticket.student?.avatarUrl" class="ticket-item__avatar">
         <img :src="ticket.student.avatarUrl" :alt="userName" />
@@ -43,12 +43,12 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
 import Badge from '@/components/Badge.vue'
 import BaseButton from '@/components/BaseButton.vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import { formatJalaaliDate } from '@/utils/date-utils'
 import { TICKET_PRIORITY, TICKET_STATUS } from '@/enums'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 const STATUS_VARIANT = {
   open: 'warning',
@@ -69,6 +69,17 @@ const props = defineProps({
 
 const emit = defineEmits(['show-details'])
 
+const isMobile = ref(window.innerWidth < 1024)
+const onResize = () => {
+  isMobile.value = window.innerWidth < 1024
+}
+onMounted(() => window.addEventListener('resize', onResize))
+onBeforeUnmount(() => window.removeEventListener('resize', onResize))
+
+const onItemClick = () => {
+  if (isMobile.value) emit('show-details', props.ticket)
+}
+
 const userName = computed(() => props.ticket.student?.name || props.ticket.subject || '—')
 
 const statusLabel = computed(() => TICKET_STATUS[props.ticket.status] || '—')
@@ -96,6 +107,10 @@ const createdAt = computed(() => formatJalaaliDate(props.ticket.createdAt) || '
     align-items: center;
   }
 
+  &--clickable {
+    cursor: pointer;
+  }
+
   &__user {
     display: flex;
     align-items: center;
@@ -105,6 +120,7 @@ const createdAt = computed(() => formatJalaaliDate(props.ticket.createdAt) || '
   }
 
   &__avatar {
+    display: none;
     width: 3rem;
     height: 3rem;
     min-width: 3rem;
@@ -112,10 +128,13 @@ const createdAt = computed(() => formatJalaaliDate(props.ticket.createdAt) || '
     overflow: hidden;
     background: #fff;
     flex-shrink: 0;
-    display: flex;
     align-items: center;
     justify-content: center;
 
+    @media (min-width: 1024px) {
+      display: flex;
+    }
+
     img {
       width: 100%;
       height: 100%;
@@ -166,13 +185,14 @@ const createdAt = computed(() => formatJalaaliDate(props.ticket.createdAt) || '
   }
 
   &__actions {
-    display: flex;
+    display: none;
     justify-content: flex-end;
     align-items: center;
     gap: 0.375rem;
     flex: 1 1 100%;
 
     @media (min-width: 1024px) {
+      display: flex;
       flex: 0 0 auto;
     }
   }

src/features/student/tickets/components/modals/CreateTicketModal.vue

@@ -35,7 +35,6 @@
             v-model="form.message"
             name="message"
             label="توضیحات خودتان را وارد کنید"
-            placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
             :row="4"
             :error="errors.message"
           />
@@ -55,8 +54,8 @@
 
         <footer class="ctm__footer">
           <button type="button" class="ctm__cancel" @click="close">
+            <SvgIcon name="caret-right" :size="16" color="currentColor" />
             <span>منصرف شدم</span>
-            <SvgIcon name="caret-left" :size="16" color="currentColor" />
           </button>
           <BaseButton
             type="submit"
@@ -211,13 +210,17 @@ const onSubmit = async (close) => {
   &__footer {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     gap: 1rem;
     flex-wrap: wrap;
+
+    @media (min-width: 640px) {
+      justify-content: space-between;
+    }
   }
 
   &__cancel {
-    display: inline-flex;
+    display: none;
     align-items: center;
     gap: 0.375rem;
     background: transparent;
@@ -229,6 +232,10 @@ const onSubmit = async (close) => {
     font-weight: 500;
     color: #969696;
 
+    @media (min-width: 640px) {
+      display: inline-flex;
+    }
+
     &:hover {
       color: #6b6b6b;
     }

src/features/student/tickets/pages/StudentTicketsPage.vue

@@ -6,7 +6,7 @@
       desc="در این قسمت می‌توانید تیکت‌های خود را مدیریت کنید"
     >
       <template #icon>
-        <SvgIcon name="chat" :size="24" color="var(--color-primary)" />
+        <SvgIcon name="envelope-open" :size="24" color="var(--color-primary)" />
       </template>
     </BoxedIconTitleBlock>
 
@@ -38,7 +38,7 @@
         @click="onNewTicket"
       >
         <template #appendIcon>
-          <SvgIcon name="plus" :size="16" color="#fff" />
+          <SvgIcon name="arrow-left" :size="16" color="#fff" />
         </template>
       </BaseButton>
     </div>
@@ -127,7 +127,7 @@ const statusTiles = computed(() => [
   {
     key: 'all',
     image: chatTextPng,
-    label: 'همه تیکت‌ها',
+    label: 'تمام تیکت‌ها',
     count: stats.value?.all ?? 0,
     countColor: '#B6842D',
   },