芝麻web文件管理V1.00

编辑当前文件:/home/pulsehostuk9/public_html/invoicer.pulsehost.co.uk/resources/DashboardTable.vue

<template>
  <div class="grid grid-cols-1 gap-6 mt-10 xl:grid-cols-2">
    
    <div class="due-invoices">
      <div class="relative z-10 flex items-center justify-between mb-3">
        <h6 class="mb-0 text-xl font-semibold leading-normal">
          {{ $t('dashboard.recent_invoices_card.title') }}
        </h6>

<BaseButton
          size="sm"
          variant="primary-outline"
          @click="$router.push({ name: 'invoices.dashboard' })"
        >
          {{ $t('dashboard.recent_invoices_card.view_all') }}
        </BaseButton>
      </div>
      
      <BaseTable
        :data="dashboardStore.recentInvoices"
        :columns="dueInvoiceColumns"
        :loading="!globalStore.getDashboardDataLoaded"
      >
        <template #cell-invoice_number="{ row }">
          <router-link
            :to="{
              path: `/${globalStore.companySlug}/customer/invoices/${row.data.id}/view`,
            }"
            class="font-medium text-primary-500"
          >
            {{ row.data.invoice_number }}
          </router-link>
        </template>

<div class="recent-estimates">
      <div class="relative z-10 flex items-center justify-between mb-3">
        <h6 class="mb-0 text-xl font-semibold leading-normal">
          {{ $t('dashboard.recent_estimate_card.title') }}
        </h6>

<BaseButton
          variant="primary-outline"
          size="sm"
          @click="$router.push({ name: 'estimates.dashboard' })"
        >
          {{ $t('dashboard.recent_estimate_card.view_all') }}
        </BaseButton>
      </div>

<BaseTable
        :data="dashboardStore.recentEstimates"
        :columns="recentEstimateColumns"
        :loading="!globalStore.getDashboardDataLoaded"
      >
        <template #cell-estimate_number="{ row }">
          <router-link
            :to="{
              path: `/${globalStore.companySlug}/customer/estimates/${row.data.id}/view`,
            }"
            class="font-medium text-primary-500"
          >
            {{ row.data.estimate_number }}
          </router-link>
        </template>
        <template #cell-status="{ row }">
          <BaseEstimateStatusBadge :status="row.data.status" class="px-3 py-1">
            <BaseEstimateStatusLabel :status="row.data.status" />
          </BaseEstimateStatusBadge>
        </template>
        <template #cell-total="{ row }">
          <BaseFormatMoney
            :amount="row.data.total"
            :currency="globalStore.currency"
          />
        </template>
      </BaseTable>
    </div>
  </div>
</template>

// store

const globalStore = useGlobalStore()
const dashboardStore = useDashboardStore()
const { tm, t } = useI18n()
const utils = inject('utils')
const route = useRoute()

//computed prop

const dueInvoiceColumns = computed(() => {
  return [
    {
      key: 'formattedDueDate',
      label: t('dashboard.recent_invoices_card.due_on'),
    },
    {
      key: 'invoice_number',
      label: t('invoices.number'),
    },
    { key: 'paid_status', label: t('invoices.status') },
    {
      key: 'due_amount',
      label: t('dashboard.recent_invoices_card.amount_due'),
    },
  ]
})
const recentEstimateColumns = computed(() => {
  return [
    {
      key: 'formattedEstimateDate',
      label: t('dashboard.recent_estimate_card.date'),
    },
    {
      key: 'estimate_number',
      label: t('estimates.number'),
    },
    { key: 'status', label: t('estimates.status') },
    {
      key: 'total',
      label: t('dashboard.recent_estimate_card.amount_due'),
    },
  ]
})
</script>