web/src/pages/AuditPage.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import api from '@/api/http'
import { formatIranDateTime } from '@/utils/datetime'

const loading = ref(false)
const rows = ref<any[]>([])

async function load() {
  loading.value = true
  try {
    const { data } = await api.get('/audit?limit=100')
    rows.value = data
  } catch (e: any) {
    message.error(e?.response?.data?.message || 'خطا در دریافت لاگ')
  } finally {
    loading.value = false
  }
}

onMounted(load)
</script>

<template>
  <div class="page-shell">
    <h1 class="page-title">لاگ تغییرات</h1>
    <p class="page-sub">آخرین عملیات روی نسخه‌های فروشی</p>

    <a-spin :spinning="loading">
      <div v-if="rows.length" class="audit-list" style="margin-top: 14px">
        <article v-for="item in rows" :key="item.id" class="audit-item">
          <div class="when">{{ formatIranDateTime(item.createdAt) }}</div>
          <div class="action">{{ item.action }}</div>
          <div style="margin-top: 6px; color: #64748b; font-size: 0.85rem">
            نسخه: {{ item.tenant?.nameFa || item.tenantId || '—' }}
            · کاربر: {{ item.user?.name || [item.user?.firstName, item.user?.lastName].filter(Boolean).join(' ') || '—' }}
          </div>
        </article>
      </div>
      <a-empty v-else description="لاگی نیست" style="margin: 28px 0" />
    </a-spin>
  </div>
</template>