@nuxt-customer-portal/invoices 0.3.0

package/app/components/InvoicesAdminListToolbar.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+const props = defineProps<{
+  filters: Array<{ key: string; placeholder: string; items: Array<{ label: string; value: string | undefined }> }>
+  filterValues: Record<string, string | undefined>
+  sortOptions: Array<{ label: string; value: string }>
+  sortBy: string
+  sortDir: 'asc' | 'desc'
+}>()
+const search = defineModel<string>('search', { required: true })
+</script>
+
+<template>
+  <PortalListToolbar
+    v-bind="{ ...props, ...$attrs }"
+    v-model:search="search"
+    :search-placeholder="$t('features.invoices.admin.list.search')"
+  />
+</template>

package/app/components/InvoicesAdminPaginatedList.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { InvoicesListPagination } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+const props = defineProps<{
+  pagination: InvoicesListPagination
+  pending: boolean
+  loadingNext: boolean
+  loadingPrevious: boolean
+  hasNext: boolean
+  hasPrevious: boolean
+  initialScrollTop?: number
+}>()
+const emit = defineEmits<{ next: []; previous: []; page: [page: number]; scroll: [scrollTop: number] }>()
+const scrollContainer = ref<HTMLElement | null>(null)
+const previousSentinel = ref<HTMLElement | null>(null)
+const nextSentinel = ref<HTMLElement | null>(null)
+let previousScrollHeight = 0
+const loadPrevious = () => {
+  previousScrollHeight = scrollContainer.value?.scrollHeight ?? 0
+  emit('previous')
+}
+watch(
+  () => props.loadingPrevious,
+  async (loading, wasLoading) => {
+    if (loading || !wasLoading || !scrollContainer.value) {
+      return
+    }
+    await nextTick()
+    scrollContainer.value.scrollTop += scrollContainer.value.scrollHeight - previousScrollHeight
+  }
+)
+useAutoPagination({
+  sentinel: previousSentinel,
+  scrollContainer,
+  canLoadMore: () => props.hasPrevious,
+  loading: () => props.pending,
+  loadMore: loadPrevious,
+  rootMargin: '240px 0px 0px 0px'
+})
+useAutoPagination({
+  sentinel: nextSentinel,
+  scrollContainer,
+  canLoadMore: () => props.hasNext,
+  loading: () => props.pending,
+  loadMore: () => emit('next')
+})
+onMounted(async () => {
+  if (!props.initialScrollTop) {
+    return
+  }
+  await nextTick()
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTop = props.initialScrollTop
+  }
+})
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div
+      ref="scrollContainer"
+      class="invoices-list-scroll min-h-0 flex-1 overflow-y-auto overflow-x-hidden"
+      @scroll="emit('scroll', scrollContainer?.scrollTop ?? 0)"
+    >
+      <div v-if="hasPrevious" ref="previousSentinel" class="h-px" aria-hidden="true" />
+      <div v-if="loadingPrevious" class="space-y-2 pb-3">
+        <USkeleton v-for="index in 2" :key="index" class="h-24 w-full" />
+      </div>
+      <slot />
+      <div v-if="hasNext" ref="nextSentinel" class="h-px" aria-hidden="true" />
+      <div v-if="loadingNext" class="space-y-2 pt-3">
+        <USkeleton v-for="index in 2" :key="index" class="h-24 w-full" />
+      </div>
+    </div>
+    <footer
+      class="flex min-h-12 shrink-0 flex-wrap items-center justify-between gap-3 border-t border-default px-1 pt-3 text-sm text-muted"
+    >
+      <span>{{ $t('features.invoices.admin.list.totalRecords', pagination.total) }}</span>
+      <UPagination
+        v-if="pagination.pageCount > 1"
+        :page="pagination.page"
+        :total="pagination.total"
+        :items-per-page="pagination.pageSize"
+        :disabled="pending"
+        @update:page="emit('page', $event)"
+      />
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.invoices-list-scroll {
+  padding: 2px 2px 16px;
+}
+</style>

package/app/components/InvoicesClientAccessPanel.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { GenericClientDto } from '@nuxt-customer-portal/clients/types'
+
+const props = defineProps<{ client: GenericClientDto }>()
+const { t } = useI18n()
+const invoices = useInvoices()
+const { data: access, error } = await useAsyncData(
+  `invoice-client-access-${props.client.organizationId}`,
+  () => invoices.clientAccessOverview(props.client.organizationId),
+  { watch: [() => props.client] }
+)
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="font-semibold">{{ t('features.invoices.clientAccess.title') }}</h2>
+      <p class="mt-1 text-sm text-muted">{{ t('features.invoices.clientAccess.description') }}</p>
+    </template>
+    <UAlert v-if="error" color="error" :title="t('features.invoices.clientAccess.error')" />
+    <div v-else-if="access" class="space-y-4">
+      <UAlert
+        v-if="!access.moduleEnabled || !access.configured || !access.enabled"
+        color="info"
+        variant="subtle"
+        icon="i-lucide-info"
+        :title="
+          t(
+            `features.invoices.clientAccess.${!access.moduleEnabled ? 'moduleDisabled' : !access.configured ? 'notConfigured' : 'disabled'}`
+          )
+        "
+      />
+      <p v-if="!access.members.length" class="text-sm text-muted">
+        {{ t('features.invoices.clientAccess.noMembers') }}
+      </p>
+      <div
+        v-for="member in access.members"
+        :key="member.id"
+        class="flex flex-wrap items-center justify-between gap-3 rounded-md border border-default p-3"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <UAvatar :src="member.image || undefined" :alt="member.name" size="sm" />
+          <div class="min-w-0">
+            <p class="font-medium">{{ member.name }}</p>
+            <p class="break-all text-sm text-muted">{{ member.email }}</p>
+            <p class="text-sm text-muted">
+              {{ t(`features.invoices.roles.${member.role}`) }} ·
+              {{
+                t(
+                  `features.invoices.clientAccess.${member.fixedAccess ? 'automatic' : member.assigned ? 'assigned' : 'notAssigned'}`
+                )
+              }}
+            </p>
+          </div>
+        </div>
+        <UBadge :color="member.canView ? 'success' : 'neutral'" variant="subtle">{{
+          t(`features.invoices.clientAccess.${member.canView ? 'granted' : 'denied'}`)
+        }}</UBadge>
+      </div>
+      <p class="text-sm text-muted">{{ t('features.invoices.clientAccess.contactsExplanation') }}</p>
+    </div>
+  </UCard>
+</template>

package/app/components/InvoicesClientSettingsPanel.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { GenericClientDto } from '@nuxt-customer-portal/clients/types'
+import type { InvoiceContactDto } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+const props = defineProps<{ client: GenericClientDto }>()
+const { t } = useI18n()
+const toast = useToast()
+const busy = ref(false)
+const editingId = ref('')
+const formOpen = ref(false)
+const state = reactive({ name: '', email: '', phone: '', jobTitle: '' })
+const schema = computed(() =>
+  z.object({
+    name: z
+      .string()
+      .trim()
+      .min(1, t('features.invoices.validation.required'))
+      .max(200, t('features.invoices.validation.maxLength', { count: 200 })),
+    email: z
+      .string()
+      .trim()
+      .toLowerCase()
+      .min(1, t('features.invoices.validation.required'))
+      .email(t('features.invoices.validation.validEmail'))
+      .max(320, t('features.invoices.validation.maxLength', { count: 320 })),
+    phone: z
+      .string()
+      .trim()
+      .max(80, t('features.invoices.validation.maxLength', { count: 80 })),
+    jobTitle: z
+      .string()
+      .trim()
+      .max(160, t('features.invoices.validation.maxLength', { count: 160 }))
+  })
+)
+const endpoint = `/api/invoices/admin/clients/${props.client.organizationId}/contacts`
+const { data: contacts, refresh } = await useFetch<InvoiceContactDto[]>(endpoint, { default: () => [] })
+const reset = () => {
+  editingId.value = ''
+  formOpen.value = false
+  Object.assign(state, { name: '', email: '', phone: '', jobTitle: '' })
+}
+const edit = (contact: InvoiceContactDto) => {
+  editingId.value = contact.id
+  formOpen.value = true
+  Object.assign(state, {
+    name: contact.name,
+    email: contact.email,
+    phone: contact.phone ?? '',
+    jobTitle: contact.jobTitle ?? ''
+  })
+}
+const save = async () => {
+  busy.value = true
+  try {
+    const validated = schema.value.parse(state)
+    const body = { ...validated, phone: validated.phone || null, jobTitle: validated.jobTitle || null }
+    if (editingId.value) {
+      await $fetch(`${endpoint}/${editingId.value}`, { method: 'PATCH', body })
+    } else {
+      await $fetch(endpoint, { method: 'POST', body })
+    }
+    await refresh()
+    reset()
+    toast.add({ title: t('features.invoices.messages.saved'), color: 'success' })
+  } catch (error) {
+    toast.add({ title: t('features.invoices.messages.saveError'), description: String(error), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+const remove = async (contact: InvoiceContactDto) => {
+  await $fetch(`${endpoint}/${contact.id}`, { method: 'DELETE' })
+  await refresh()
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <InvoicesClientAccessPanel :client="client" />
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between gap-3">
+          <div>
+            <h2 class="font-semibold">{{ t('features.invoices.admin.contactPersons') }}</h2>
+            <p class="text-sm text-muted">{{ t('features.invoices.admin.noContactsDescription') }}</p>
+          </div>
+          <UButton
+            v-if="!formOpen"
+            type="button"
+            size="sm"
+            variant="outline"
+            icon="i-lucide-plus"
+            @click="formOpen = true"
+          >
+            {{ t('features.invoices.admin.addContact') }}
+          </UButton>
+        </div>
+      </template>
+      <div class="grid gap-2">
+        <div
+          v-for="contact in contacts"
+          :key="contact.id"
+          class="flex items-center justify-between gap-3 rounded-md border border-default p-3"
+        >
+          <div>
+            <p class="font-medium">{{ contact.name }}</p>
+            <p class="text-sm text-muted">{{ contact.email }}</p>
+          </div>
+          <div class="flex gap-1">
+            <UButton type="button" variant="ghost" icon="i-lucide-pencil" @click="edit(contact)" /><UButton
+              type="button"
+              color="error"
+              variant="ghost"
+              icon="i-lucide-trash-2"
+              @click="remove(contact)"
+            />
+          </div>
+        </div>
+        <p v-if="!contacts.length && !formOpen" class="text-sm text-muted">
+          {{ t('features.invoices.admin.noContactsTitle') }}
+        </p>
+        <UForm
+          v-if="formOpen"
+          :state="state"
+          :schema="schema"
+          novalidate
+          class="grid gap-3 md:grid-cols-2"
+          @submit="save"
+        >
+          <UFormField name="name" :label="t('features.invoices.admin.name')" required>
+            <UInput v-model="state.name" class="w-full" /> </UFormField
+          ><UFormField name="email" :label="t('features.invoices.admin.email')" required>
+            <UInput v-model="state.email" type="email" class="w-full" /> </UFormField
+          ><UFormField name="phone" :label="t('features.invoices.admin.phone')">
+            <UInput v-model="state.phone" class="w-full" /> </UFormField
+          ><UFormField name="jobTitle" :label="t('features.invoices.admin.jobTitle')">
+            <UInput v-model="state.jobTitle" class="w-full" />
+          </UFormField>
+          <div class="flex justify-end gap-2 md:col-span-2">
+            <UButton type="button" color="neutral" variant="outline" @click="reset">
+              {{ t('features.invoices.cancel') }} </UButton
+            ><UButton type="submit" :loading="busy">{{ t('features.invoices.save') }}</UButton>
+          </div>
+        </UForm>
+      </div>
+    </UCard>
+  </div>
+</template>

package/app/components/InvoicesDashboardCard.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { InvoicesListResponse } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+const props = defineProps<{ section: 'salesInvoices' | 'receivedInvoices' }>()
+const { t } = useI18n()
+const sales = props.section === 'salesInvoices'
+const endpoint = sales ? '/api/invoices/admin/invoices' : '/api/invoices/client/invoices'
+const { data, pending } = await useFetch<InvoicesListResponse<unknown>>(endpoint, { query: { pageSize: 1 } })
+const total = computed(() => data.value?.pagination.total ?? 0)
+</script>
+
+<template>
+  <UCard class="h-full">
+    <template #header>
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="font-semibold">
+          {{ t(sales ? 'features.invoices.salesInvoices' : 'features.invoices.receivedInvoices') }}
+        </h2>
+        <UIcon :name="sales ? 'i-lucide-receipt-text' : 'i-lucide-inbox'" class="size-5 text-primary" />
+      </div>
+    </template>
+    <div class="flex items-end justify-between gap-4">
+      <p class="text-3xl font-semibold tabular-nums">{{ pending ? '…' : total }}</p>
+      <UButton :to="sales ? '/admin/invoices' : '/invoices'" variant="outline" icon="i-lucide-arrow-right">
+        {{ t('features.invoices.dashboard.open') }}
+      </UButton>
+    </div>
+  </UCard>
+</template>

package/app/components/InvoicesDashboardReceivedInvoices.vue

@@ -0,0 +1 @@
+<template><InvoicesDashboardCard section="receivedInvoices" /></template>

package/app/components/InvoicesDashboardSalesInvoices.vue

@@ -0,0 +1 @@
+<template><InvoicesDashboardCard section="salesInvoices" /></template>