vmall/apps/mall/pages/user/invoices.vue

<script setup lang="ts">
import type { Invoice } from "@vmall/shared";

definePageMeta({ middleware: "auth" });

const { t } = useI18n();
const { $api } = useNuxtApp();

const rows = ref<Invoice[]>([]);
const loading = ref(true);

async function load(): Promise<void> {
  loading.value = true;
  try {
    rows.value = await $api.listMyInvoices();
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  void load();
});
</script>

<template>
  <VCard class="min-h-[560px]">
    <h1 class="mb-4 text-xl font-bold text-text">{{ t("user.invoicesTitle") }}</h1>
    <div v-if="loading" class="px-0 py-5 text-muted">{{ t("common.loading") }}</div>
    <UiEmptyState v-else-if="rows.length === 0" :text="t('user.noInvoices')" />
    <VTable v-else>
      <thead>
        <tr>
          <th>{{ t("user.invoiceNo") }}</th>
          <th>{{ t("user.invoiceOrderNo") }}</th>
          <th>{{ t("user.invoiceTitle") }}</th>
          <th>{{ t("user.invoiceKind") }}</th>
          <th>{{ t("user.amount") }}</th>
          <th>{{ t("common.status") }}</th>
          <th>{{ t("user.invoiceIssuedAt") }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="invoice in rows" :key="invoice.id">
          <td>{{ invoice.invoice_no || t("mall.notAvailable") }}</td>
          <td>{{ invoice.order_no || t("mall.notAvailable") }}</td>
          <td>{{ invoice.title }}</td>
          <td>{{ invoice.kind === "personal" ? t("user.personal") : t("user.company") }}</td>
          <td><PriceText :amount-minor="invoice.amount_minor" :currency="invoice.currency" /></td>
          <td><StatusBadge :status="invoice.status" kind="invoice" /></td>
          <td>{{ invoice.issued_at ? invoice.issued_at.slice(0, 10) : t("mall.notAvailable") }}</td>
        </tr>
      </tbody>
    </VTable>
  </VCard>
</template>