hedena_gold/apps/admin-panel/src/views/notify/user.vue

<template>
  <!--
    Ported from legacy henza_admin/src/views/notify/user.vue — the received
    notifications list, with a read-state modal.
  -->
  <a-card title="لیست نوتیفیکیشن های دریافتی" class="page-card">
    <XTable ref="tbl" :model="model" mobile-cards>
      <template #opt="{ record }">
        <a-tooltip title="مشاهده">
          <Icon icon="vuesax-linear:eye" size="16" class="cursor-pointer mx-1 text-primary" @click="view(record)" />
        </a-tooltip>
      </template>
    </XTable>

    <a-modal v-model:open="visible" title="مشاهده نوتیفیکیشن" width="60%" wrap-class-name="detail-modal">
      <div v-if="tempRow">
        <a-descriptions bordered size="small" :column="1">
          <a-descriptions-item label="عنوان">{{ tempRow.title }}</a-descriptions-item>
          <a-descriptions-item label="متن">{{ tempRow.body }}</a-descriptions-item>
          <a-descriptions-item label="ارسال کننده">{{ tempRow.sender ?? '-' }}</a-descriptions-item>
          <a-descriptions-item label="خوانده شده">
            {{ tempRow.read_count }} از {{ tempRow.total_count }}
          </a-descriptions-item>
        </a-descriptions>

        <a-table
          class="mt-4"
          size="small"
          :data-source="tempRow.recipients"
          :columns="recipientColumns"
          :pagination="{ pageSize: 10 }"
          row-key="id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'is_read'">
              <a-tag v-if="record.is_read" color="green">خوانده شده</a-tag>
              <a-button v-else size="small" @click="markRead(record)">علامت‌گذاری</a-button>
            </template>
            <template v-else-if="column.dataIndex === 'customer'">
              {{ record.customer.name }}
            </template>
          </template>
        </a-table>
      </div>
      <a-empty v-else />

      <template #footer>
        <a-button @click="visible = false">بستن</a-button>
      </template>
    </a-modal>
  </a-card>
</template>

<script setup lang="ts">
import Icon from '../../components/icon/Icon.vue';
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import XTable from '../../components/x-table/XTable.vue';
import { buildNotifyModel } from './notifyTbl';
import api from '../../api/client';

const model = buildNotifyModel();
const tbl = ref<{ fetch: () => Promise<void> } | null>(null);
const visible = ref(false);
const tempRow = ref<Record<string, any> | undefined>(undefined);

const recipientColumns = [
  { title: 'مشتری', dataIndex: 'customer' },
  { title: 'وضعیت', dataIndex: 'is_read' },
];

async function view(record: Record<string, any>) {
  const { data } = await api.get(`notify/${record.id}`);
  tempRow.value = data;
  visible.value = true;
}

/** legacy GET notify/read/{id} */
async function markRead(recipient: Record<string, any>) {
  try {
    await api.get(`notify/read/${recipient.id}`);
    recipient.is_read = true;
    if (tempRow.value) tempRow.value.read_count += 1;
    message.success('علامت‌گذاری شد');
  } catch (e: any) {
    message.error(e?.response?.data?.message ?? 'خطا');
  }
}
</script>

<style scoped>
.mt-4 { margin-top: 1rem; }
</style>