@nuxt-customer-portal/invoices 0.3.0

package/app/pages/admin/invoices/[id].vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineOptions({ name: 'AdminInvoiceDetailPage' })
+
+const route = useRoute()
+const { t } = useI18n()
+const api = useInvoices()
+const invoiceId = computed(() => String(route.params.id))
+const {
+  data: invoice,
+  pending,
+  error,
+  refresh
+} = await useAsyncData(`invoice-${invoiceId.value}`, () => api.getInvoice(invoiceId.value))
+useSeoMeta({
+  title: computed(() =>
+    invoice.value
+      ? t('features.invoices.admin.invoiceTitle', { number: invoice.value.number })
+      : t('features.invoices.salesInvoices')
+  )
+})
+</script>
+
+<template>
+  <section class="h-full min-h-0 overflow-y-auto p-4 sm:p-6 lg:p-8">
+    <div v-if="pending" class="flex justify-center py-12">
+      <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" />
+    </div>
+    <UAlert
+      v-else-if="error"
+      color="error"
+      icon="i-lucide-circle-alert"
+      :title="t('features.invoices.admin.invoiceNotFound')"
+    />
+    <InvoicesInvoiceDetail v-else-if="invoice" :invoice="invoice" :refresh="refresh" />
+  </section>
+</template>

package/app/pages/admin/invoices/index.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const invoices = useInvoices()
+const child = ref<{
+  openCreate: () => void
+  refreshList: () => Promise<unknown>
+  canCreate: boolean
+  showCreate: boolean
+} | null>(null)
+const { data, pending, refresh } = await useAsyncData('invoices-admin', () => invoices.adminBootstrap())
+const { t } = useI18n()
+useSeoMeta({ title: () => t('features.invoices.salesInvoices') })
+</script>
+
+<template>
+  <section
+    class="invoice-admin mx-auto flex h-full min-h-0 w-full max-w-[1440px] flex-col overflow-hidden p-4 sm:p-6 lg:p-8"
+  >
+    <header class="mb-4 flex shrink-0 items-center justify-between gap-3 border-b border-default pb-4 sm:items-end">
+      <div class="flex min-w-0 gap-3">
+        <UIcon name="i-lucide-receipt-text" class="mt-1 size-6 shrink-0 text-primary" />
+        <div class="min-w-0">
+          <h1 class="text-2xl font-semibold">{{ t('features.invoices.salesInvoices') }}</h1>
+          <p class="mt-1 hidden text-sm text-muted sm:block">
+            {{ t('features.invoices.admin.sectionSubtitles.invoices') }}
+          </p>
+        </div>
+      </div>
+      <div class="flex shrink-0 items-center gap-1">
+        <UButton
+          v-if="child?.showCreate"
+          class="rounded-full sm:hidden"
+          icon="i-lucide-plus"
+          :aria-label="t('features.invoices.admin.newInvoice')"
+          :disabled="!child.canCreate"
+          @click="child.openCreate()"
+        /><UButton
+          v-if="child?.showCreate"
+          class="hidden sm:inline-flex"
+          icon="i-lucide-plus"
+          size="sm"
+          variant="outline"
+          :disabled="!child.canCreate"
+          @click="child.openCreate()"
+        >
+          {{ t('features.invoices.admin.newInvoice') }} </UButton
+        ><UButton
+          icon="i-lucide-refresh-cw"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          :aria-label="t('common.refresh')"
+          @click="() => refresh()"
+        />
+      </div>
+    </header>
+    <div v-if="pending && !data" class="flex justify-center py-12">
+      <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" />
+    </div>
+    <InvoicesAdminInvoices v-if="data" ref="child" :data="data" :refresh="refresh" class="min-h-0 flex-1" />
+  </section>
+</template>

package/app/pages/admin/invoices/new.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const invoices = useInvoices()
+const { t } = useI18n()
+const { data, refresh } = await useAsyncData('invoice-create-bootstrap', () => invoices.adminBootstrap())
+useSeoMeta({ title: () => t('features.invoices.admin.newInvoice') })
+</script>
+
+<template>
+  <section class="invoice-admin flex h-full min-h-0 flex-col overflow-hidden p-4 sm:p-6 lg:p-8">
+    <header class="mb-6 shrink-0">
+      <UButton to="/admin/invoices" color="neutral" variant="link" icon="i-lucide-arrow-left" class="mb-3 px-0">
+        {{ t('features.invoices.admin.backToInvoices') }}
+      </UButton>
+      <h1 class="text-2xl font-semibold">{{ t('features.invoices.admin.newInvoice') }}</h1>
+    </header>
+    <InvoicesAdminInvoices v-if="data" :data="data" :refresh="refresh" create-page class="min-h-0 flex-1" />
+  </section>
+</template>

package/app/pages/admin/invoices/settings.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const api = useInvoices()
+const { data, refresh } = await useAsyncData('invoice-settings', () => api.adminBootstrap())
+const { t } = useI18n()
+const busy = ref(false)
+const general = reactive({ enabled: false, currency: 'EUR', defaultVatRate: 21 })
+watch(
+  data,
+  (value) => {
+    if (value) {
+      Object.assign(general, {
+        enabled: value.settings.enabled,
+        currency: value.settings.currency,
+        defaultVatRate: value.settings.defaultVatRateBasisPoints / 100
+      })
+    }
+  },
+  { immediate: true }
+)
+const saveGeneral = async () => {
+  if (!data.value) {
+    return
+  }
+  busy.value = true
+  try {
+    const { organizationId: _organizationId, ...settings } = data.value.settings
+    await api.updateSettings({
+      ...settings,
+      enabled: general.enabled,
+      currency: general.currency.toUpperCase(),
+      defaultVatRateBasisPoints: Math.round(general.defaultVatRate * 100)
+    })
+    await refresh()
+    if (import.meta.client) {
+      window.dispatchEvent(new CustomEvent('invoices:capabilities-refresh'))
+    }
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col overflow-hidden">
+    <div class="min-h-0 flex-1 overflow-y-auto">
+      <section class="mx-auto flex w-full max-w-[1440px] flex-col gap-4 p-4 sm:p-6 lg:p-8">
+        <header class="flex items-center justify-between gap-3 border-b border-default pb-4 sm:items-end">
+          <div class="flex min-w-0 gap-3">
+            <UIcon name="i-lucide-settings-2" class="mt-1 size-6 shrink-0 text-primary" />
+            <div class="min-w-0">
+              <h1 class="text-2xl font-semibold text-highlighted">
+                {{ t('features.invoices.admin.workspaceSettings') }}
+              </h1>
+              <p class="hidden text-sm text-muted sm:block">
+                {{ t('features.invoices.admin.workspaceSettingsDescription') }}
+              </p>
+            </div>
+          </div>
+        </header>
+        <UCard v-if="data">
+          <template #header>
+            <h2 class="font-semibold">{{ t('features.invoices.admin.invoiceConfiguration') }}</h2>
+          </template>
+          <form class="grid gap-4 md:grid-cols-3" @submit.prevent="saveGeneral">
+            <UFormField class="md:col-span-3">
+              <USwitch v-model="general.enabled" :label="t('features.invoices.admin.invoicesEnabled')" /> </UFormField
+            ><UFormField :label="t('features.invoices.admin.currency')">
+              <UInput v-model="general.currency" maxlength="3" class="w-full" /> </UFormField
+            ><UFormField :label="t('features.invoices.admin.defaultVatRate')">
+              <UInputNumber v-model="general.defaultVatRate" :min="0" :max="100" :step="0.01" class="w-full" />
+            </UFormField>
+            <div class="flex items-end justify-end">
+              <UButton type="submit" icon="i-lucide-save" :loading="busy">{{ t('features.invoices.save') }}</UButton>
+            </div>
+          </form>
+        </UCard>
+        <InvoicesSenderDetailsForm
+          v-if="data"
+          id="sender-invoice-details"
+          :profile="data.organizationProfile"
+          :refresh="refresh"
+        />
+      </section>
+    </div>
+  </div>
+</template>

package/app/pages/invoices/[id].vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const route = useRoute()
+const { t } = useI18n()
+const api = useInvoices()
+const invoiceId = computed(() => String(route.params.id))
+const {
+  data: invoice,
+  pending,
+  error,
+  refresh
+} = await useAsyncData(`client-invoice-${invoiceId.value}`, () => api.getClientInvoice(invoiceId.value))
+useSeoMeta({
+  title: computed(() =>
+    invoice.value
+      ? t('features.invoices.admin.invoiceTitle', { number: invoice.value.number })
+      : t('features.invoices.clientInvoices.title')
+  )
+})
+</script>
+
+<template>
+  <InvoicesPageShell class="h-full min-h-0 overflow-y-auto">
+    <div v-if="pending" class="flex justify-center py-12" role="status">
+      <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" /><span class="sr-only">{{
+        t('features.invoices.loading')
+      }}</span>
+    </div>
+    <UAlert
+      v-else-if="error"
+      color="error"
+      icon="i-lucide-circle-alert"
+      :title="t('features.invoices.admin.invoiceNotFound')"
+      variant="outline"
+    />
+    <InvoicesInvoiceDetail v-else-if="invoice" :invoice="invoice" :refresh="refresh" mode="client" />
+  </InvoicesPageShell>
+</template>

package/app/pages/invoices/index.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { ClientInvoiceSummaryDto, InvoiceStatus } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+const { t, locale } = useI18n()
+const route = useRoute()
+const listing = useInvoicesAdminList<ClientInvoiceSummaryDto>({
+  endpoint: '/api/invoices/client/invoices',
+  filterKeys: ['accessId', 'status', 'overdue'],
+  defaultSort: 'issueDate',
+  defaultSortDir: 'desc'
+})
+const { data: suppliers } = await useAsyncData('invoice-client-suppliers', useInvoices().clientInvoiceSuppliers)
+const filters = computed(() => [
+  {
+    key: 'status',
+    placeholder: t('features.invoices.clientInvoices.statusFilter'),
+    items: [
+      { label: t('features.invoices.clientInvoices.allStatuses'), value: undefined },
+      { label: t('features.invoices.admin.invoiceStatus.issued'), value: 'ISSUED' },
+      { label: t('features.invoices.admin.invoiceStatus.paid'), value: 'PAID' }
+    ]
+  },
+  {
+    key: 'accessId',
+    placeholder: t('features.invoices.clientInvoices.supplierFilter'),
+    items: [
+      { label: t('features.invoices.clientInvoices.allSuppliers'), value: undefined },
+      ...(suppliers.value ?? []).map((item) => ({ label: item.providerName, value: item.id }))
+    ]
+  },
+  {
+    key: 'overdue',
+    placeholder: t('features.invoices.clientInvoices.paymentFilter'),
+    items: [
+      { label: t('features.invoices.clientInvoices.allPayments'), value: undefined },
+      { label: t('features.invoices.clientInvoices.overdueOnly'), value: 'true' },
+      { label: t('features.invoices.clientInvoices.notOverdue'), value: 'false' }
+    ]
+  }
+])
+const sortOptions = computed(() => [
+  { label: t('features.invoices.admin.list.sortIssueDate'), value: 'issueDate' },
+  { label: t('features.invoices.admin.list.sortDueDate'), value: 'dueDate' },
+  { label: t('features.invoices.admin.list.sortNumber'), value: 'number' },
+  { label: t('features.invoices.admin.list.sortTotal'), value: 'totalMinor' }
+])
+const money = (minor: number, currency: string) =>
+  new Intl.NumberFormat(locale.value, { style: 'currency', currency }).format(minor / 100)
+const date = (value: string) =>
+  new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium' }).format(new Date(`${value}T12:00:00`))
+const statusColor = (status: InvoiceStatus) => (status === 'PAID' ? 'success' : 'info')
+useSeoMeta({ title: () => t('features.invoices.clientInvoices.title') })
+await listing.load()
+</script>
+
+<template>
+  <NuxtPage v-if="route.path !== '/invoices'" />
+  <InvoicesPageShell v-else class="flex h-full min-h-0 flex-col overflow-hidden">
+    <header class="shrink-0 border-b border-default pb-5">
+      <div class="flex items-center gap-2">
+        <UIcon name="i-lucide-receipt-text" class="size-6" />
+        <h1 class="text-2xl font-semibold">{{ t('features.invoices.clientInvoices.title') }}</h1>
+      </div>
+      <p class="mt-1 hidden text-sm text-muted sm:block">{{ t('features.invoices.clientInvoices.subtitle') }}</p>
+    </header>
+    <section class="flex min-h-0 flex-1 flex-col gap-5 pt-5">
+      <InvoicesAdminListToolbar
+        v-model:search="listing.search.value"
+        :filters="filters"
+        :filter-values="listing.filters"
+        :sort-options="sortOptions"
+        :sort-by="listing.sortBy.value"
+        :sort-dir="listing.sortDir.value"
+        @filter="listing.setFilter"
+        @sort="listing.sortBy.value = $event"
+        @toggle-direction="listing.toggleSortDir"
+      />
+      <InvoicesAdminPaginatedList
+        class="min-h-0 flex-1"
+        :pagination="listing.pagination.value"
+        :pending="listing.pending.value"
+        :loading-next="listing.loadingNextPage.value"
+        :loading-previous="listing.loadingPreviousPage.value"
+        :has-next="listing.hasNextPage.value"
+        :has-previous="listing.hasPreviousPage.value"
+        @next="listing.loadNext"
+        @previous="listing.loadPrevious"
+        @page="listing.goToPage"
+      >
+        <UAlert
+          v-if="!listing.items.value.length && !listing.pending.value"
+          icon="i-lucide-receipt-text"
+          :title="t('features.invoices.clientInvoices.empty')"
+          :description="t('features.invoices.clientInvoices.emptyDescription')"
+          variant="outline"
+        />
+        <div v-else class="grid gap-3">
+          <UCard v-for="item in listing.items.value" :key="item.id" class="transition-colors hover:ring-primary/50">
+            <NuxtLink
+              :to="`/invoices/${item.id}`"
+              class="grid gap-4 rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary sm:grid-cols-[minmax(12rem,1fr)_minmax(10rem,1fr)_9rem_auto] sm:items-center"
+            >
+              <div class="min-w-0">
+                <p class="truncate font-semibold">{{ item.number }}</p>
+                <p class="mt-1 truncate text-sm text-muted">{{ item.supplierName }}</p>
+              </div>
+              <div>
+                <p class="text-sm">{{ date(item.issueDate) }}</p>
+                <p class="mt-1 text-xs text-muted">
+                  {{ t('features.invoices.admin.dueDate') }} {{ date(item.dueDate) }}
+                </p>
+              </div>
+              <div>
+                <p class="font-medium">{{ money(item.totalMinor, item.currency) }}</p>
+                <p v-if="item.outstandingMinor" class="mt-1 text-xs text-muted">
+                  {{ t('features.invoices.admin.outstanding') }} {{ money(item.outstandingMinor, item.currency) }}
+                </p>
+              </div>
+              <div class="flex items-center justify-end gap-2">
+                <UBadge :color="statusColor(item.status)" variant="subtle">{{
+                  t(`features.invoices.admin.invoiceStatus.${item.status.toLowerCase()}`)
+                }}</UBadge
+                ><UIcon name="i-lucide-chevron-right" class="size-5 text-muted" />
+              </div>
+            </NuxtLink>
+          </UCard>
+        </div>
+      </InvoicesAdminPaginatedList>
+    </section>
+  </InvoicesPageShell>
+</template>

package/app/pages/invoices/viewers.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const api = useInvoices()
+const toast = useToast()
+const { data: suppliers, refresh: refreshSuppliers } = await useAsyncData(
+  'invoice-viewer-suppliers',
+  api.clientInvoiceSuppliers
+)
+const supplier = computed(() => suppliers.value?.[0] ?? null)
+const { data: viewers, refresh } = await useAsyncData('invoice-viewers', async () =>
+  supplier.value ? api.clientInvoiceViewers(supplier.value.id) : []
+)
+const fixedViewers = computed(() => viewers.value?.filter((person) => person.fixedAccess) ?? [])
+const configurableViewers = computed(() => viewers.value?.filter((person) => !person.fixedAccess) ?? [])
+const viewerCount = computed(() => viewers.value?.filter((person) => person.assigned).length ?? 0)
+const toggle = async (userId: string, assigned: boolean) => {
+  if (!supplier.value) {
+    return
+  }
+  try {
+    await api.setClientInvoiceViewer(supplier.value.id, userId, assigned)
+    await Promise.all([refresh(), refreshSuppliers()])
+    window.dispatchEvent(new CustomEvent('invoices:capabilities-refresh'))
+  } catch {
+    toast.add({
+      title: t('features.invoices.messages.saveError'),
+      color: 'error'
+    })
+  }
+}
+useSeoMeta({
+  title: () => t('features.invoices.clientInvoices.viewersTitle')
+})
+</script>
+
+<template>
+  <InvoicesPageShell width="narrow" class="h-full overflow-y-auto">
+    <header class="border-b border-default pb-5">
+      <h1 class="text-2xl font-semibold">
+        {{ t('features.invoices.clientInvoices.viewersTitle') }}
+      </h1>
+      <p class="mt-1 text-sm text-muted">
+        {{ t('features.invoices.clientInvoices.viewersSubtitle') }}
+      </p>
+    </header>
+    <UAlert
+      v-if="!supplier"
+      class="mt-6"
+      icon="i-lucide-receipt-text"
+      :title="t('features.invoices.clientInvoices.accessUnavailable')"
+      variant="outline"
+    />
+    <section v-else class="my-6 rounded-lg border border-default bg-default">
+      <header class="border-b border-default p-5">
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <h2 class="text-lg font-semibold">
+              {{ t('features.invoices.clientInvoices.chooseViewers') }}
+            </h2>
+            <p class="mt-1 text-sm text-muted">
+              {{ t('features.invoices.clientInvoices.viewerHelp') }}
+            </p>
+          </div>
+          <UBadge color="neutral" variant="subtle">
+            {{ t('features.invoices.clientInvoices.viewerCount', viewerCount) }}
+          </UBadge>
+        </div>
+      </header>
+      <div v-if="fixedViewers.length" class="border-b border-default">
+        <h3 class="bg-elevated/40 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted">
+          {{ t('features.invoices.clientInvoices.alwaysAccess') }}
+        </h3>
+        <div class="divide-y divide-default">
+          <div v-for="person in fixedViewers" :key="person.id" class="flex items-center justify-between gap-3 p-4">
+            <span class="min-w-0"
+              ><strong class="block text-sm">{{ person.name }}</strong
+              ><span class="block truncate text-xs text-muted">{{ person.email }}</span></span
+            >
+            <div class="flex items-center gap-2">
+              <UBadge color="neutral" variant="soft">
+                {{ t(`features.invoices.roles.${person.role}`) }}
+              </UBadge>
+              <UBadge color="success" variant="soft">
+                {{ t('features.invoices.clientInvoices.hasAccess') }}
+              </UBadge>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="configurableViewers.length">
+        <h3 class="bg-elevated/40 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted">
+          {{ t('features.invoices.clientInvoices.additionalAccess') }}
+        </h3>
+        <div class="divide-y divide-default">
+          <label
+            v-for="person in configurableViewers"
+            :key="person.id"
+            class="flex items-center gap-3 p-4 hover:bg-elevated/40"
+            ><USwitch :model-value="person.assigned" @update:model-value="toggle(person.id, $event)" /><span
+              class="min-w-0"
+              ><strong class="block text-sm">{{ person.name }}</strong
+              ><span class="block truncate text-xs text-muted">{{ person.email }}</span></span
+            ></label
+          >
+        </div>
+      </div>
+      <p v-if="!fixedViewers.length && !configurableViewers.length" class="p-5 text-sm text-muted">
+        {{ t('features.invoices.clientInvoices.noEligibleViewers') }}
+      </p>
+      <footer class="border-t border-default p-4 text-xs text-muted">
+        {{ t('features.invoices.clientInvoices.adminAccessHelp') }}
+      </footer>
+    </section>
+  </InvoicesPageShell>
+</template>

package/app/plugins/invoices-feature.ts

@@ -0,0 +1,60 @@
+import { invoicesFeature } from '@nuxt-customer-portal/invoices/shared/feature'
+import type { InvoiceCapabilitiesDto } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+export default defineNuxtPlugin(() => {
+  const { registerFeature } = usePortalFeatures()
+  const { activeOrganizationId } = usePortalSession()
+  const register = (capabilities: InvoiceCapabilitiesDto) =>
+    registerFeature({
+      ...invoicesFeature,
+      modules: invoicesFeature.modules
+        ?.filter(() => capabilities.canConfigureInvoices || capabilities.canViewReceivedInvoices)
+        .map((module) => ({
+          ...module,
+          to: capabilities.canViewReceivedInvoices ? '/invoices' : '/admin/invoices',
+          menuItems: module.menuItems?.filter((item) =>
+            item.id === 'invoice-settings'
+              ? capabilities.canConfigureInvoices
+              : item.id === 'sales-invoices'
+                ? capabilities.canManageInvoices
+                : item.id === 'invoice-viewers'
+                  ? capabilities.canManageViewers
+                  : capabilities.canViewReceivedInvoices
+          )
+        })),
+      dashboardWidgets: invoicesFeature.dashboardWidgets?.filter((widget) =>
+        widget.id === 'invoices-sales' ? capabilities.canManageInvoices : capabilities.canViewReceivedInvoices
+      )
+    })
+  const empty = {
+    canConfigureInvoices: false,
+    canManageInvoices: false,
+    canViewReceivedInvoices: false,
+    canManageViewers: false,
+    invoicesEnabled: false
+  }
+  register(empty)
+  watch(
+    activeOrganizationId,
+    async (id) => {
+      if (!id) {
+        return register(empty)
+      }
+      try {
+        register(await $fetch<InvoiceCapabilitiesDto>('/api/invoices/capabilities'))
+      } catch {
+        register(empty)
+      }
+    },
+    { immediate: true }
+  )
+  if (import.meta.client) {
+    window.addEventListener('invoices:capabilities-refresh', async () => {
+      try {
+        register(await $fetch<InvoiceCapabilitiesDto>('/api/invoices/capabilities'))
+      } catch {
+        register(empty)
+      }
+    })
+  }
+})