Files
InvoiceShelf/resources/scripts-v2/features/company/dashboard/components/DashboardStats.vue
Darko Gjorgjijoski a46cca5cd8 Complete scripts-v2 TypeScript migration — all imports resolved,
build passes

Create all missing components (modals, dropdowns, icons, tabs, mail
drivers, customer partials), fix all @/scripts/ imports to @v2/,
wire up vite entry point and blade template. 382 files, 48883 lines.

- 27 settings components: modals (tax, payment, custom field, note,
  category, role, exchange rate, unit, mail test), dropdowns (6),
  customization tabs (4), mail driver forms (4)
- 22 icon components: 5 utility icons, 4 dashboard icons, 13 editor
  toolbar icons with typed barrel export
- 3 customer components: info, chart placeholder, custom fields single
- Fixed usePopper composable, client/format-money import patterns
- Zero remaining @/scripts/ imports in scripts-v2/

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 09:30:00 +02:00

86 lines
2.8 KiB
Vue

<script setup lang="ts">
import DollarIcon from '@v2/components/icons/dashboard/DollarIcon.vue'
import CustomerIcon from '@v2/components/icons/dashboard/CustomerIcon.vue'
import InvoiceIcon from '@v2/components/icons/dashboard/InvoiceIcon.vue'
import EstimateIcon from '@v2/components/icons/dashboard/EstimateIcon.vue'
import DashboardStatsItem from './DashboardStatsItem.vue'
import { useDashboardStore } from '../store'
import { useCompanyStore } from '../../../../stores/company.store'
import { useUserStore } from '../../../../stores/user.store'
const ABILITIES = {
VIEW_INVOICE: 'view-invoice',
VIEW_CUSTOMER: 'view-customer',
VIEW_ESTIMATE: 'view-estimate',
} as const
const dashboardStore = useDashboardStore()
const companyStore = useCompanyStore()
const userStore = useUserStore()
</script>
<template>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-9 xl:gap-8">
<!-- Amount Due -->
<DashboardStatsItem
v-if="userStore.hasAbilities(ABILITIES.VIEW_INVOICE)"
:icon-component="DollarIcon"
:loading="!dashboardStore.isDashboardDataLoaded"
route="/admin/invoices"
:large="true"
:label="$t('dashboard.cards.due_amount')"
>
<BaseFormatMoney
:amount="dashboardStore.stats.totalAmountDue"
:currency="companyStore.selectedCompanyCurrency"
/>
</DashboardStatsItem>
<!-- Customers -->
<DashboardStatsItem
v-if="userStore.hasAbilities(ABILITIES.VIEW_CUSTOMER)"
:icon-component="CustomerIcon"
:loading="!dashboardStore.isDashboardDataLoaded"
route="/admin/customers"
:label="
dashboardStore.stats.totalCustomerCount <= 1
? $t('dashboard.cards.customers', 1)
: $t('dashboard.cards.customers', 2)
"
>
{{ dashboardStore.stats.totalCustomerCount }}
</DashboardStatsItem>
<!-- Invoices -->
<DashboardStatsItem
v-if="userStore.hasAbilities(ABILITIES.VIEW_INVOICE)"
:icon-component="InvoiceIcon"
:loading="!dashboardStore.isDashboardDataLoaded"
route="/admin/invoices"
:label="
dashboardStore.stats.totalInvoiceCount <= 1
? $t('dashboard.cards.invoices', 1)
: $t('dashboard.cards.invoices', 2)
"
>
{{ dashboardStore.stats.totalInvoiceCount }}
</DashboardStatsItem>
<!-- Estimates -->
<DashboardStatsItem
v-if="userStore.hasAbilities(ABILITIES.VIEW_ESTIMATE)"
:icon-component="EstimateIcon"
:loading="!dashboardStore.isDashboardDataLoaded"
route="/admin/estimates"
:label="
dashboardStore.stats.totalEstimateCount <= 1
? $t('dashboard.cards.estimates', 1)
: $t('dashboard.cards.estimates', 2)
"
>
{{ dashboardStore.stats.totalEstimateCount }}
</DashboardStatsItem>
</div>
</template>