@nuxt-customer-portal/invoices 0.3.3 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @nuxt-customer-portal/invoices
 
+## 0.4.1
+
+### Patch Changes
+
+- Keep fresh SaaS portal registration on the organization bootstrap flow. Disable public personal-client self-registration by default while preserving invitation-only personal-client access.
+- Updated dependencies
+  - @nuxt-customer-portal/clients@0.4.1
+  - @nuxt-customer-portal/core@0.4.1
+  - @nuxt-customer-portal/organizations@0.4.1
+  - @nuxt-customer-portal/ui@0.4.1
+
+## 0.4.0
+
+### Minor Changes
+
+- 59c8921: Add the Products store module and product invoice integration: translated digital products and services, secret catalog API keys, Stripe one-time checkout, guest invitations, purchaser-only delivery, exact multi-currency invoices, and refund credit notes. Add narrowly scoped external authentication routes, API documentation contracts, and configurable module activation. Existing stores remain closed until explicitly configured and enabled.
+- 59c8921: Replace the unused single-product purchase record with multi-item-ready orders, order lines, carts, and cart lines while preserving the current one-product checkout experience. Generate invoice lines from immutable order lines.
+
+### Patch Changes
+
+- 59c8921: Use compact currency symbols in invoice PDFs and give future product invoices a localized purchase-reference subject distinct from their product line descriptions.
+- 59c8921: Support organization and personal clients with optional verified self-registration, single-person access safeguards, and shared provider, client, and user timezone preferences. Preserve existing B2B defaults, module references, invoice history, and Timesheets timezone behavior.
+
+  Collect and store first and last names during signup and personal onboarding. Route ordinary personal registration and verified users without memberships or pending invitations through onboarding.
+
+  Allow users to edit first name, last name, and an independent display name in profile settings.
+
+  Synchronize display-name edits with the linked private client name and current billing name in the same transaction, preserving organizations and historical invoices.
+
+  Let private clients edit their own billing address in profile settings, independently of the active organization, with server-side ownership checks.
+
+  Private clients use their own invoice email without contact persons; hide contact management and reject private-client contact creation or selection server-side.
+
+  Add a B2C-only Invite private client action to the Users page, supporting new and existing private clients with atomic record creation, request retry protection, and pending invitation recovery when email delivery fails.
+
+- 59c8921: Store the sender country as structured invoice data, show it in invoice settings, and preserve it on generated invoices.
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+- Updated dependencies [59c8921]
+  - @nuxt-customer-portal/core@0.4.0
+  - @nuxt-customer-portal/clients@0.4.0
+  - @nuxt-customer-portal/organizations@0.4.0
+  - @nuxt-customer-portal/ui@0.4.0
+
 ## 0.3.3
 
 ### Patch Changes

package/app/components/InvoicesAdminInvoices.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { currencyScale } from '@nuxt-customer-portal/invoices/shared/money'
 import { z } from 'zod'
 import { createHoursIntroduction } from '@nuxt-customer-portal/invoices/shared/invoice-introduction'
 import type { InvoicesAdminBootstrap } from '@nuxt-customer-portal/invoices/app/composables/useInvoices'
@@ -121,7 +122,7 @@ const invoiceSchema = computed(() =>
     })
 )
 const money = (minor: unknown, currency = props.data.settings.currency) =>
-  new Intl.NumberFormat(locale.value, { style: 'currency', currency }).format(Number(minor) / 100)
+  new Intl.NumberFormat(locale.value, { style: 'currency', currency }).format(Number(minor) / currencyScale(currency))
 const dateTime = (value: string) =>
   new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(value))
 const quantityFormat: Intl.NumberFormatOptions = { minimumFractionDigits: 2, maximumFractionDigits: 3 }
@@ -140,7 +141,7 @@ const updateQuantity = (line: (typeof model.lines)[number], value: number | null
   line.quantityMilli = Math.round(Number(value ?? 0) * 1000)
 }
 const updateUnitPrice = (line: (typeof model.lines)[number], value: number | null | undefined) => {
-  line.unitPriceMinor = Math.round(Number(value ?? 0) * 100)
+  line.unitPriceMinor = Math.round(Number(value ?? 0) * currencyScale(model.currency))
 }
 const updateVatRate = (line: (typeof model.lines)[number], value: number | null | undefined) => {
   line.vatRateBasisPoints = Math.round(Number(value ?? 0) * 10_000)
@@ -183,7 +184,9 @@ const missingClientInvoiceDetails = computed(() => {
   }
   const missing = [
     !client.address.trim() && t('features.invoices.admin.address'),
-    !client.contacts.length && t('features.invoices.admin.contactPersons')
+    client.clientType === 'person'
+      ? !client.invoiceEmail?.trim() && t('features.invoices.admin.email')
+      : !client.contacts.length && t('features.invoices.admin.contactPersons')
   ]
   return missing.filter((item): item is string => Boolean(item))
 })
@@ -192,6 +195,7 @@ const senderInvoiceDetailsComplete = computed(() => {
   const profile = props.data.organizationProfile
   return [
     profile.address,
+    profile.country,
     profile.registrationNumber,
     profile.vatNumber,
     profile.iban,
@@ -250,7 +254,8 @@ const chooseClient = (id: string) => {
 }
 const editSelectedClient = async () => {
   await navigateTo({
-    path: `/clients/${selectedClient.value?.organizationId}`
+    path: `/clients/${selectedClient.value?.organizationId}`,
+    query: { edit: 'true' }
   })
 }
 const groupEntries = (entries: InvoiceableEntryDto[]) => {
@@ -378,8 +383,16 @@ if (props.createPage) {
       @sort="listing.sortBy.value = $event"
       @toggle-direction="listing.toggleSortDir"
     />
+    <UAlert
+      v-if="!createPage && !formOpen && listing.error.value"
+      color="error"
+      variant="outline"
+      icon="i-lucide-circle-alert"
+      :title="t('features.invoices.messages.fetchError')"
+      :description="String(listing.error.value.message)"
+    />
     <InvoicesAdminEmptyState
-      v-if="!createPage && !formOpen && !senderInvoiceDetailsComplete"
+      v-else-if="!createPage && !formOpen && !senderInvoiceDetailsComplete"
       icon="i-lucide-file-warning"
       :title="t('features.invoices.admin.senderDetailsRequiredTitle')"
       :description="t('features.invoices.admin.senderDetailsRequiredDescription')"
@@ -546,7 +559,11 @@ if (props.createPage) {
             <UFormField :label="t('features.invoices.admin.client')">
               <UInput :model-value="selectedClient?.name" disabled class="w-full" />
             </UFormField>
-            <UFormField name="contactId" :label="t('features.invoices.admin.contact')">
+            <UFormField
+              v-if="selectedClient?.clientType !== 'person'"
+              name="contactId"
+              :label="t('features.invoices.admin.contact')"
+            >
               <USelect
                 v-model="model.contactId"
                 :items="
@@ -557,6 +574,9 @@ if (props.createPage) {
                 class="w-full"
               />
             </UFormField>
+            <UFormField v-if="selectedClient?.clientType === 'person'" :label="t('features.invoices.admin.email')">
+              <UInput :model-value="selectedClient.invoiceEmail ?? ''" disabled class="w-full" />
+            </UFormField>
             <UFormField :label="t('features.invoices.admin.currency')">
               <UInput v-model="model.currency" disabled class="w-full" />
             </UFormField>
@@ -607,7 +627,7 @@ if (props.createPage) {
               :label="t('features.invoices.admin.unitPrice')"
             >
               <UInputNumber
-                :model-value="line.unitPriceMinor / 100"
+                :model-value="line.unitPriceMinor / currencyScale(model.currency)"
                 :min="0"
                 :step="0.01"
                 :format-options="currencyFormat"

package/app/components/InvoicesClientAccessPanel.vue

@@ -57,7 +57,9 @@ const { data: access, error } = await useAsyncData(
           t(`features.invoices.clientAccess.${member.canView ? 'granted' : 'denied'}`)
         }}</UBadge>
       </div>
-      <p class="text-sm text-muted">{{ t('features.invoices.clientAccess.contactsExplanation') }}</p>
+      <p v-if="client.clientType !== 'person'" class="text-sm text-muted">
+        {{ t('features.invoices.clientAccess.contactsExplanation') }}
+      </p>
     </div>
   </UCard>
 </template>

package/app/components/InvoicesClientSettingsPanel.vue

@@ -35,7 +35,10 @@ const schema = computed(() =>
   })
 )
 const endpoint = `/api/invoices/admin/clients/${props.client.organizationId}/contacts`
-const { data: contacts, refresh } = await useFetch<InvoiceContactDto[]>(endpoint, { default: () => [] })
+const { data: contacts, refresh } = await useFetch<InvoiceContactDto[]>(endpoint, {
+  default: () => [],
+  immediate: props.client.clientType !== 'person'
+})
 const reset = () => {
   editingId.value = ''
   formOpen.value = false
@@ -77,7 +80,7 @@ const remove = async (contact: InvoiceContactDto) => {
 </script>
 
 <template>
-  <div class="space-y-6">
+  <div v-if="client.clientType !== 'person'" class="space-y-6">
     <InvoicesClientAccessPanel :client="client" />
     <UCard>
       <template #header>
@@ -141,7 +144,9 @@ const remove = async (contact: InvoiceContactDto) => {
           <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>
+            ><UButton type="submit" icon="i-lucide-save" class="ml-auto flex min-w-28 justify-center" :loading="busy">{{
+              t('features.invoices.save')
+            }}</UButton>
           </div>
         </UForm>
       </div>

package/app/components/InvoicesInvoiceDetail.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { currencyScale } from '@nuxt-customer-portal/invoices/shared/money'
 import { z } from 'zod'
 import type {
   ClientInvoiceDto,
@@ -8,11 +9,19 @@ import type {
 import { isKnownEmailProviderEvent } from '@nuxt-customer-portal/invoices/shared/email-delivery-status'
 
 const props = withDefaults(
-  defineProps<{ invoice: InvoiceDto | ClientInvoiceDto; refresh: () => Promise<unknown>; mode?: 'admin' | 'client' }>(),
+  defineProps<{
+    invoice: InvoiceDto | ClientInvoiceDto
+    refresh: () => Promise<unknown>
+    mode?: 'admin' | 'client'
+    backTo?: string
+    backLabel?: string
+  }>(),
   { mode: 'admin' }
 )
 const isClient = computed(() => props.mode === 'client')
 const { t, locale } = useI18n()
+const countryName = (country: string | null) =>
+  country ? new Intl.DisplayNames(locale.value, { type: 'region' }).of(country) || country : ''
 const portalRuntimeSettings = useState<{
   branding?: { portalName?: string; markLight?: string; markDark?: string }
 } | null>('portal-runtime-settings', () => null)
@@ -38,13 +47,21 @@ const paymentOpen = ref(false)
 const editOpen = ref(false)
 const emailOpen = ref(false)
 const emailMode = ref<'issue' | 'resend' | 'reminder'>('issue')
+const canResendInvoice = computed(
+  () => !isClient.value && (props.invoice.status === 'ISSUED' || props.invoice.status === 'PAID')
+)
 const attachment = ref<File | null>(null)
 const attachmentDeletion = ref<{ id: string; name: string } | null>(null)
 const attachmentDeleteOpen = ref(false)
 const statusConfirmation = ref<'VOID' | 'UNVOID' | null>(null)
 const statusConfirmationOpen = ref(false)
 const today = new Date().toISOString().slice(0, 10)
-const payment = reactive({ paidOn: today, amount: props.invoice.outstandingMinor / 100, reference: '', note: '' })
+const payment = reactive({
+  paidOn: today,
+  amount: props.invoice.outstandingMinor / currencyScale(props.invoice.currency),
+  reference: '',
+  note: ''
+})
 const edit = reactive({
   number: props.invoice.number,
   issueDate: props.invoice.issueDate,
@@ -64,7 +81,7 @@ const paymentSchema = computed(() =>
     amount: z
       .number()
       .positive(t('features.invoices.validation.positiveAmount'))
-      .max(props.invoice.outstandingMinor / 100),
+      .max(props.invoice.outstandingMinor / currencyScale(props.invoice.currency)),
     reference: z.string().trim().max(200),
     note: z.string().trim().max(1000)
   })
@@ -89,7 +106,9 @@ const editSchema = computed(() =>
     })
 )
 const money = (minor: number) =>
-  new Intl.NumberFormat(locale.value, { style: 'currency', currency: props.invoice.currency }).format(minor / 100)
+  new Intl.NumberFormat(locale.value, { style: 'currency', currency: props.invoice.currency }).format(
+    minor / currencyScale(props.invoice.currency)
+  )
 const number = (value: number) =>
   new Intl.NumberFormat(locale.value, { minimumFractionDigits: 2, maximumFractionDigits: 3 }).format(value / 1000)
 const percentage = (basisPoints: number) =>
@@ -230,7 +249,7 @@ const savePayment = async () => {
     () =>
       api.registerInvoicePayment(props.invoice.id, {
         paidOn: payment.paidOn,
-        amountMinor: Math.round(payment.amount * 100),
+        amountMinor: Math.round(payment.amount * currencyScale(props.invoice.currency)),
         reference: payment.reference || null,
         note: payment.note || null
       }),
@@ -300,7 +319,7 @@ const mobileMenuItems = computed(() => {
       onSelect: () => openEmail('issue')
     })
   }
-  if (!isClient.value && props.invoice.status === 'ISSUED' && !props.invoice.isOverdue) {
+  if (canResendInvoice.value) {
     items.push({
       label: t('features.invoices.admin.resendInvoice'),
       icon: 'i-lucide-mail',
@@ -355,11 +374,9 @@ const refreshEmailStatuses = async (forceRefresh = false) => {
   }
 }
 
-onMounted(() => {
-  if (!isClient.value) {
-    void refreshEmailStatuses()
-  }
-})
+if (!isClient.value) {
+  await refreshEmailStatuses()
+}
 </script>
 
 <template>
@@ -367,17 +384,24 @@ onMounted(() => {
     <header class="invoice-detail-header">
       <div class="min-w-0">
         <UButton
-          :to="isClient ? '/invoices' : '/admin/invoices'"
+          :to="backTo || (isClient ? '/invoices' : '/admin/invoices')"
           variant="link"
           color="neutral"
           icon="i-lucide-arrow-left"
           class="invoice-back-link mb-2 px-0"
         >
-          {{ t('features.invoices.admin.backToInvoices') }}
+          {{ backLabel || t('features.invoices.admin.backToInvoices') }}
         </UButton>
         <div class="invoice-title-line">
           <h1 class="text-2xl font-semibold text-highlighted">
-            {{ t('features.invoices.admin.invoiceTitle', { number: invoice.number }) }}
+            {{
+              t(
+                invoice.documentType === 'credit'
+                  ? 'features.invoices.admin.creditTitle'
+                  : 'features.invoices.admin.invoiceTitle',
+                { number: invoice.number }
+              )
+            }}
           </h1>
           <div class="invoice-status-badges">
             <UBadge :color="statusColor" variant="subtle">
@@ -416,7 +440,7 @@ onMounted(() => {
           {{ t('features.invoices.admin.issueAndSend') }}
         </UButton>
         <UButton
-          v-if="!isClient && invoice.status === 'ISSUED' && !invoice.isOverdue"
+          v-if="canResendInvoice"
           class="invoice-actions-wide"
           icon="i-lucide-mail"
           variant="outline"
@@ -470,7 +494,7 @@ onMounted(() => {
     </header>
 
     <InvoicesInvoiceEmailModal
-      v-if="!isClient"
+      v-if="!isClient && emailOpen"
       v-model:open="emailOpen"
       :invoice-id="invoice.id"
       :mode="emailMode"
@@ -541,7 +565,9 @@ onMounted(() => {
         <div class="flex justify-end gap-2">
           <UButton type="button" color="neutral" variant="ghost" @click="editOpen = false">
             {{ t('features.invoices.cancel') }} </UButton
-          ><UButton type="submit" icon="i-lucide-save" :loading="busy">{{ t('features.invoices.save') }}</UButton>
+          ><UButton type="submit" icon="i-lucide-save" class="ml-auto flex min-w-28 justify-center" :loading="busy">{{
+            t('features.invoices.save')
+          }}</UButton>
         </div>
       </UForm>
     </UCard>
@@ -560,7 +586,7 @@ onMounted(() => {
           <UInputNumber
             v-model="payment.amount"
             :min="0.01"
-            :max="invoice.outstandingMinor / 100"
+            :max="invoice.outstandingMinor / currencyScale(invoice.currency)"
             :step="0.01"
             :increment="false"
             :decrement="false"
@@ -609,6 +635,7 @@ onMounted(() => {
             <span v-for="(line, index) in addressLines(invoice.senderAddress)" :key="index" class="block">{{
               line
             }}</span>
+            <span v-if="invoice.senderCountry" class="block">{{ countryName(invoice.senderCountry) }}</span>
           </address>
         </div>
       </div>
@@ -806,7 +833,7 @@ onMounted(() => {
       </div>
     </section>
     <ConfirmationModal
-      v-if="!isClient"
+      v-if="!isClient && attachmentDeleteOpen"
       v-model:open="attachmentDeleteOpen"
       :title="t('features.invoices.admin.removeAttachment')"
       :message="t('features.invoices.admin.removeAttachmentDescription', { name: attachmentDeletion?.name })"
@@ -814,10 +841,9 @@ onMounted(() => {
       :cancel-text="t('features.invoices.cancel')"
       confirm-color="error"
       @confirm="removeAttachment"
-      @cancel="attachmentDeletion = null"
     />
     <ConfirmationModal
-      v-if="!isClient"
+      v-if="!isClient && statusConfirmationOpen"
       v-model:open="statusConfirmationOpen"
       :title="
         t(
@@ -840,7 +866,6 @@ onMounted(() => {
       :cancel-text="t('features.invoices.cancel')"
       :confirm-color="statusConfirmation === 'VOID' ? 'error' : 'primary'"
       @confirm="confirmStatusAction"
-      @cancel="statusConfirmation = null"
     />
   </div>
 </template>

package/app/components/InvoicesInvoiceEmailModal.vue

@@ -4,8 +4,9 @@ import type { InvoiceEmailPreviewDto } from '@nuxt-customer-portal/invoices/shar
 
 type EmailMode = 'issue' | 'resend' | 'reminder'
 
-const props = defineProps<{ open: boolean; invoiceId: string; mode: EmailMode; refresh: () => Promise<unknown> }>()
-const emit = defineEmits<{ 'update:open': [value: boolean]; sent: [] }>()
+const props = defineProps<{ invoiceId: string; mode: EmailMode; refresh: () => Promise<unknown> }>()
+const open = defineModel<boolean>('open', { default: false })
+const emit = defineEmits<{ sent: [] }>()
 const { t } = useI18n()
 const api = useInvoices()
 const toast = useToast()
@@ -49,7 +50,7 @@ const loadPreview = async (locale?: string) => {
     const result =
       props.mode === 'reminder'
         ? await api.getInvoiceReminderPreview(props.invoiceId, locale)
-        : await api.getInvoiceEmailPreview(props.invoiceId, locale)
+        : await api.getInvoiceEmailPreview(props.invoiceId, locale, props.mode === 'resend' ? 'resend' : undefined)
     preview.value = result
     Object.assign(draft, {
       to: result.to,
@@ -59,22 +60,13 @@ const loadPreview = async (locale?: string) => {
       body: result.body
     })
   } catch (error) {
-    emit('update:open', false)
+    open.value = false
     toast.add({ title: t('features.invoices.messages.saveError'), description: String(error), color: 'error' })
   } finally {
     loadingPreview.value = false
   }
 }
-watch(
-  () => props.open,
-  (open) => {
-    if (open) {
-      void loadPreview()
-    } else {
-      preview.value = null
-    }
-  }
-)
+await loadPreview()
 const send = async () => {
   busy.value = true
   try {
@@ -95,7 +87,7 @@ const send = async () => {
     await props.refresh()
     toast.add({ title: t(successKey.value), color: 'success' })
     emit('sent')
-    emit('update:open', false)
+    open.value = false
   } catch (error) {
     toast.add({ title: t('features.invoices.messages.saveError'), description: String(error), color: 'error' })
   } finally {
@@ -105,7 +97,7 @@ const send = async () => {
 </script>
 
 <template>
-  <UModal :open="open" :title="t(titleKey)" @update:open="emit('update:open', $event)">
+  <UModal v-if="open" v-model:open="open" :title="t(titleKey)">
     <template #body>
       <div v-if="loadingPreview" class="flex justify-center py-10" role="status">
         <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" /><span class="sr-only">{{
@@ -198,7 +190,7 @@ const send = async () => {
           </ul>
         </div>
         <div class="flex justify-end gap-2">
-          <UButton type="button" color="neutral" variant="ghost" @click="emit('update:open', false)">
+          <UButton type="button" color="neutral" variant="ghost" @click="open = false">
             {{ t('features.invoices.cancel') }} </UButton
           ><UButton
             type="submit"

package/app/components/InvoicesSenderDetailsForm.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { z } from 'zod'
 import type { OrganizationInvoiceProfileDto } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+import { countryCodes } from '@nuxt-customer-portal/core/shared/countries'
 
 const props = defineProps<{
   profile: OrganizationInvoiceProfileDto
   refresh: () => Promise<unknown>
 }>()
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const toast = useToast()
 const invoices = useInvoices()
 const { isSystemAdmin } = usePortalSession()
@@ -20,6 +21,7 @@ const { data: domainStatus, refresh: refreshDomainStatus } = await useFetch<Doma
 )
 const draft = reactive({
   address: '',
+  country: '',
   registrationNumber: '',
   vatNumber: '',
   iban: '',
@@ -29,6 +31,7 @@ const draft = reactive({
 const schema = computed(() =>
   z.object({
     address: z.string().trim().min(1, t('features.invoices.validation.required')).max(1000),
+    country: z.string().refine((value) => countryCodes.includes(value), t('features.invoices.validation.required')),
     registrationNumber: z.string().trim().min(1, t('features.invoices.validation.required')).max(200),
     vatNumber: z.string().trim().min(1, t('features.invoices.validation.required')).max(100),
     iban: z.string().trim().min(1, t('features.invoices.validation.required')).max(100),
@@ -41,6 +44,12 @@ const schema = computed(() =>
       .max(320)
   })
 )
+const countryOptions = computed(() => {
+  const names = new Intl.DisplayNames(locale.value, { type: 'region' })
+  return countryCodes
+    .map((value) => ({ value, label: `${names.of(value) || value} (${value})` }))
+    .sort((a, b) => a.label.localeCompare(b.label))
+})
 
 const checkDomain = async (forceRefresh = true) => {
   checkingDomain.value = true
@@ -73,6 +82,7 @@ watch(
   (profile) => {
     Object.assign(draft, {
       address: profile.address,
+      country: profile.country ?? '',
       registrationNumber: profile.registrationNumber ?? '',
       vatNumber: profile.vatNumber ?? '',
       iban: profile.iban ?? '',
@@ -204,6 +214,15 @@ const save = async () => {
       <UFormField name="address" :label="t('features.invoices.admin.address')" required>
         <UTextarea v-model="draft.address" class="w-full" />
       </UFormField>
+      <UFormField name="country" :label="t('features.invoices.admin.country')" required>
+        <USelectMenu
+          v-model="draft.country"
+          :items="countryOptions"
+          value-key="value"
+          :placeholder="t('features.invoices.admin.selectCountry')"
+          class="w-full"
+        />
+      </UFormField>
       <div class="grid gap-3 md:grid-cols-2">
         <UFormField name="registrationNumber" :label="t('features.invoices.admin.registration')" required>
           <UInput v-model="draft.registrationNumber" class="w-full" />
@@ -221,9 +240,11 @@ const save = async () => {
           <UInput v-model="draft.invoiceEmail" type="email" class="w-full" />
         </UFormField>
       </div>
-      <UButton type="submit" block icon="i-lucide-save" :loading="busy">
-        {{ t('features.invoices.save') }}
-      </UButton>
+      <div class="flex justify-end">
+        <UButton type="submit" icon="i-lucide-save" class="ml-auto flex min-w-28 justify-center" :loading="busy">
+          {{ t('features.invoices.save') }}
+        </UButton>
+      </div>
     </UForm>
   </UCard>
 </template>

package/app/composables/useInvoices.ts

@@ -30,8 +30,10 @@ export const useInvoices = () => ({
     $fetch(`/api/invoices/admin/invoices/${id}`, { method: 'PATCH' as never, body: input }),
   changeInvoiceStatus: (id: string, action: 'VOID' | 'UNVOID') =>
     $fetch(`/api/invoices/admin/invoices/${id}`, { method: 'PATCH' as never, body: { action } }),
-  getInvoiceEmailPreview: (id: string, locale?: string) =>
-    $fetch<InvoiceEmailPreviewDto>(`/api/invoices/admin/invoices/${id}/email-preview`, { query: { locale } }),
+  getInvoiceEmailPreview: (id: string, locale?: string, purpose?: 'resend') =>
+    $fetch<InvoiceEmailPreviewDto>(`/api/invoices/admin/invoices/${id}/email-preview`, {
+      query: { locale, purpose }
+    }),
   issueAndSendInvoice: (id: string, input: Record<string, unknown>) =>
     $fetch(`/api/invoices/admin/invoices/${id}/issue`, { method: 'POST', body: input }),
   resendInvoice: (id: string, input: Record<string, unknown>) =>

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

@@ -70,7 +70,13 @@ const saveGeneral = async () => {
               <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>
+              <UButton
+                type="submit"
+                icon="i-lucide-save"
+                class="ml-auto flex min-w-28 justify-center"
+                :loading="busy"
+                >{{ t('features.invoices.save') }}</UButton
+              >
             </div>
           </form>
         </UCard>

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

@@ -3,6 +3,7 @@ const route = useRoute()
 const { t } = useI18n()
 const api = useInvoices()
 const invoiceId = computed(() => String(route.params.id))
+const fromOrder = computed(() => route.query.from === 'orders')
 const {
   data: invoice,
   pending,
@@ -32,6 +33,13 @@ useSeoMeta({
       :title="t('features.invoices.admin.invoiceNotFound')"
       variant="outline"
     />
-    <InvoicesInvoiceDetail v-else-if="invoice" :invoice="invoice" :refresh="refresh" mode="client" />
+    <InvoicesInvoiceDetail
+      v-else-if="invoice"
+      :invoice="invoice"
+      :refresh="refresh"
+      mode="client"
+      :back-to="fromOrder ? '/purchases' : undefined"
+      :back-label="fromOrder ? t('features.invoices.admin.backToOrders') : undefined"
+    />
   </InvoicesPageShell>
 </template>

package/app/pages/invoices/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { currencyScale } from '@nuxt-customer-portal/invoices/shared/money'
 import type { ClientInvoiceSummaryDto, InvoiceStatus } from '@nuxt-customer-portal/invoices/shared/types/invoice'
 
 const { t, locale } = useI18n()
@@ -45,7 +46,7 @@ const sortOptions = computed(() => [
   { 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)
+  new Intl.NumberFormat(locale.value, { style: 'currency', currency }).format(minor / currencyScale(currency))
 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')
@@ -88,7 +89,15 @@ await listing.load()
         @page="listing.goToPage"
       >
         <UAlert
-          v-if="!listing.items.value.length && !listing.pending.value"
+          v-if="listing.error.value"
+          color="error"
+          variant="outline"
+          icon="i-lucide-circle-alert"
+          :title="t('features.invoices.messages.fetchError')"
+          :description="String(listing.error.value.message)"
+        />
+        <UAlert
+          v-else-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')"

package/app/pages/invoices/viewers.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 const { t } = useI18n()
+const { activeOrganizationIsPersonal } = usePortalSession()
+if (activeOrganizationIsPersonal.value) {
+  await navigateTo('/invoices')
+}
 const api = useInvoices()
 const toast = useToast()
 const { data: suppliers, refresh: refreshSuppliers } = await useAsyncData(