fix: ticket

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

@@ -7,55 +7,81 @@
     min-width="auto"
     :show-close-button="true"
   >
-    <template #default="{ data }">
+    <template #default>
       <div class="service-details">
-        <div class="service-details__row service-details__row--two">
-          <LineInfoBlock title="عنوان خدمت" :desc="serviceTitle(data)" />
-          <LineInfoBlock title="نوع خدمت" :desc="serviceTypeLabel(data)" />
-        </div>
+        <SkeletonLoaderBlock v-if="isLoading && !service" :rows="3" :cols-per-row="1" />
+        <template v-else>
+          <div class="service-details__row service-details__row--two">
+            <LineInfoBlock title="عنوان خدمت" :desc="serviceTitle" />
+            <LineInfoBlock title="نوع خدمت" :desc="serviceTypeLabel" />
+          </div>
 
-        <div class="service-details__row">
-          <LineInfoBlock title="درخواست" :desc="requestText(data)" />
-        </div>
+          <div class="service-details__row">
+            <LineInfoBlock title="درخواست" :desc="requestText" />
+          </div>
 
-        <div class="service-details__divider" />
+          <div class="service-details__divider" />
 
-        <footer class="service-details__footer">
-          <BaseButton
-            text="ارسال پیام"
-            custom-class="service-details__send-btn"
-            @click="onSendMessage(data)"
-          >
-            <template #appendIcon>
-              <SvgIcon name="arrow-left" :size="18" color="#fff" />
-            </template>
-          </BaseButton>
-        </footer>
+          <footer class="service-details__footer">
+            <BaseButton
+              text="ارسال پیام"
+              custom-class="service-details__send-btn"
+              @click="onSendMessage"
+            >
+              <template #appendIcon>
+                <SvgIcon name="arrow-left" :size="18" color="#fff" />
+              </template>
+            </BaseButton>
+          </footer>
+        </template>
       </div>
     </template>
   </BasicModal>
 </template>
 
 <script setup>
+import { computed } from 'vue'
 import { SERVICE_TYPE } from '@/enums'
 import useModal from '@/composables/useModal'
 import BasicModal from '@/components/BasicModal.vue'
 import BaseButton from '@/components/BaseButton.vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
+import { useAdminServiceQuery } from '@/services/query/admin-services'
+import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
 
 defineOptions({ name: 'ServiceDetailsModal' })
 
-const { openModal } = useModal()
+const { openModal, getModal } = useModal()
 
-const serviceTitle = (data) => data?.title || data?.serviceTitle || '—'
+const modalData = computed(() => getModal('ServiceDetailsModal')?.data ?? {})
+const serviceId = computed(() => modalData.value.id ?? null)
 
-const serviceTypeLabel = (data) => data?.typeLabel || SERVICE_TYPE[data?.type] || '—'
+const { data: service, isLoading } = useAdminServiceQuery(serviceId, {
+  enabled: () => !!serviceId.value,
+})
 
-const requestText = (data) => data?.requestText || data?.description || '—'
+// Subject is the canonical title on the new schema; older fixtures used `title`.
+const serviceTitle = computed(
+  () => service.value?.subject || service.value?.title || service.value?.serviceTitle || '—'
+)
 
-const onSendMessage = (data) => {
-  openModal('SendMessageModal', { service: data })
+const serviceTypeLabel = computed(
+  () => service.value?.typeLabel || SERVICE_TYPE[service.value?.type] || '—'
+)
+
+// Pre-migration fixtures used `requestText`/`description`; the new schema puts
+// the body inside the first message.
+const requestText = computed(
+  () =>
+    service.value?.requestText ||
+    service.value?.description ||
+    service.value?.messages?.[0]?.message ||
+    '—'
+)
+
+const onSendMessage = () => {
+  openModal('SendMessageModal', { id: serviceId.value })
 }
 </script>