<template>
<div class="grid grid-cols-1 gap-6 mt-10 xl:grid-cols-2">
<!-- Due Invoices -->
<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>
<!-- Recent Invoice-->
<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>
<template #cell-paid_status="{ row }">
<BasePaidStatusBadge :status="row.data.paid_status">
<BaseInvoiceStatusLabel :status="row.data.paid_status" />
</BasePaidStatusBadge>
</template>
<template #cell-due_amount="{ row }">
<BaseFormatMoney
:amount="row.data.due_amount"
:currency="globalStore.currency"
/>