fix: missionary education

src/features/missionary/education/pages/MissionaryLessonDetailsPage.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="missionary-lesson-details">
+    <BoxedIconTitleBlock
+      class="missionary-lesson-details__heading"
+      title="جزئیات درس"
+      :desc="course?.title || 'جلسات این درس را مشاهده کنید.'"
+    >
+      <template #icon>
+        <SvgIcon name="book" :size="24" color="var(--color-primary)" />
+      </template>
+    </BoxedIconTitleBlock>
+
+    <SimpleTitleIconBlock title="همه جلسه ها" class="missionary-lesson-details__list-title">
+      <template #header-icon>
+        <SvgIcon name="list-bullets" :size="16" color="#bcbcbc" />
+      </template>
+    </SimpleTitleIconBlock>
+
+    <SkeletonLoaderBlock
+      v-if="sessionsLoading && sessions.length === 0"
+      :rows="3"
+      :cols-per-row="1"
+    />
+    <div v-else-if="sessions.length > 0">
+      <StudentSessionItem
+        v-for="session in sessions"
+        :key="session.id"
+        :session="session"
+        @start="onStartSession"
+      />
+    </div>
+    <NoItems v-else title="جلسه‌ای نیست" desc="جلسه‌ای برای این درس ثبت نشده است." />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import NoItems from '@/components/blocks/NoItems.vue'
+import { StudentSessionItem } from '@/features/student/sessions'
+import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
+import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
+import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
+import {
+  useMissionaryPassedCoursesQuery,
+  useMissionaryPassedSessionsQuery,
+} from '@/services/query/missionary-education'
+
+const route = useRoute()
+const router = useRouter()
+
+const courseId = computed(() => route.params.id)
+const termId = computed(() => route.query.termId || null)
+
+// Course header comes from the passed-courses list cache (same key as the term
+// page), so it needs no detail endpoint.
+const coursesFilters = computed(() => ({ termId: termId.value }))
+const coursesPagination = ref({ page: 1, perPage: 20 })
+const { data: coursesData } = useMissionaryPassedCoursesQuery(coursesFilters, coursesPagination, {
+  enabled: () => !!termId.value,
+})
+const course = computed(() =>
+  (coursesData.value?.data ?? []).find((c) => String(c.id) === String(courseId.value))
+)
+
+const sessionsFilters = computed(() => ({ courseId: courseId.value }))
+const sessionsPagination = ref({ page: 1, perPage: 20 })
+const { data: sessionsData, isLoading: sessionsLoading } = useMissionaryPassedSessionsQuery(
+  sessionsFilters,
+  sessionsPagination,
+  { enabled: () => !!courseId.value, keepPreviousData: true }
+)
+const sessions = computed(() => sessionsData.value?.data ?? [])
+
+const onStartSession = (session) => {
+  router.push({ name: 'missionary-education-session', params: { id: session.id } }).catch(() => {})
+}
+</script>
+
+<style lang="scss" scoped>
+.missionary-lesson-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  &__heading {
+    margin-bottom: 0.75rem;
+  }
+
+  &__list-title {
+    margin-top: 0.5rem;
+  }
+}
+</style>