@nuxt-customer-portal/invoices 0.3.0

package/app/components/InvoicesInvoiceEmailModal.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { InvoiceEmailPreviewDto } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+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 { t } = useI18n()
+const api = useInvoices()
+const toast = useToast()
+const { activeOrganizationRole, isSystemAdmin } = usePortalSession()
+const canConfigureEmailProvider = computed(() => isSystemAdmin.value || activeOrganizationRole.value === 'owner')
+const busy = ref(false)
+const loadingPreview = ref(false)
+const preview = ref<InvoiceEmailPreviewDto | null>(null)
+const draft = reactive({ to: '', cc: '', locale: 'nl' as 'nl' | 'en', subject: '', body: '' })
+const schema = computed(() =>
+  z.object({
+    to: z.string().trim().email(t('features.invoices.validation.validEmail')),
+    cc: z
+      .string()
+      .refine(
+        (value) => !value.trim() || value.split(',').every((item) => z.string().email().safeParse(item.trim()).success),
+        t('features.invoices.validation.validEmail')
+      ),
+    locale: z.enum(['nl', 'en']),
+    subject: z.string().trim().min(1, t('features.invoices.validation.required')).max(500),
+    body: z.string().trim().min(1, t('features.invoices.validation.required')).max(10000)
+  })
+)
+const titleKey = computed(() =>
+  props.mode === 'issue'
+    ? 'features.invoices.admin.issueAndSend'
+    : props.mode === 'reminder'
+      ? 'features.invoices.admin.sendReminder'
+      : 'features.invoices.admin.resendInvoice'
+)
+const successKey = computed(() =>
+  props.mode === 'issue'
+    ? 'features.invoices.admin.invoiceIssuedAndSent'
+    : props.mode === 'reminder'
+      ? 'features.invoices.admin.reminderSent'
+      : 'features.invoices.admin.invoiceResent'
+)
+const loadPreview = async (locale?: string) => {
+  loadingPreview.value = true
+  try {
+    const result =
+      props.mode === 'reminder'
+        ? await api.getInvoiceReminderPreview(props.invoiceId, locale)
+        : await api.getInvoiceEmailPreview(props.invoiceId, locale)
+    preview.value = result
+    Object.assign(draft, {
+      to: result.to,
+      cc: result.cc.join(', '),
+      locale: result.locale === 'en' ? 'en' : 'nl',
+      subject: result.subject,
+      body: result.body
+    })
+  } catch (error) {
+    emit('update:open', 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
+    }
+  }
+)
+const send = async () => {
+  busy.value = true
+  try {
+    const input = {
+      ...draft,
+      cc: draft.cc
+        .split(',')
+        .map((item) => item.trim())
+        .filter(Boolean)
+    }
+    if (props.mode === 'issue') {
+      await api.issueAndSendInvoice(props.invoiceId, input)
+    } else if (props.mode === 'reminder') {
+      await api.sendInvoiceReminder(props.invoiceId, input)
+    } else {
+      await api.resendInvoice(props.invoiceId, input)
+    }
+    await props.refresh()
+    toast.add({ title: t(successKey.value), color: 'success' })
+    emit('sent')
+    emit('update:open', false)
+  } catch (error) {
+    toast.add({ title: t('features.invoices.messages.saveError'), description: String(error), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal :open="open" :title="t(titleKey)" @update:open="emit('update:open', $event)">
+    <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">{{
+          t('features.invoices.loading')
+        }}</span>
+      </div>
+      <UForm v-else novalidate :state="draft" :schema="schema" class="space-y-4" @submit="send">
+        <UAlert
+          v-if="preview && !preview.emailProviderConfigured"
+          color="error"
+          icon="i-lucide-key-round"
+          :title="t('features.invoices.admin.emailProviderNotConfigured')"
+          variant="outline"
+        >
+          <template #description>
+            <p>
+              {{
+                t(
+                  canConfigureEmailProvider
+                    ? 'features.invoices.admin.emailProviderConfigureDescription'
+                    : 'features.invoices.admin.emailProviderContactOwner'
+                )
+              }}
+            </p>
+            <UButton
+              v-if="canConfigureEmailProvider"
+              to="/settings/organization"
+              color="neutral"
+              variant="solid"
+              size="xs"
+              icon="i-lucide-settings"
+              class="mt-2"
+            >
+              {{ t('features.invoices.admin.emailProviderOpenSettings') }}
+            </UButton>
+          </template>
+        </UAlert>
+        <UAlert
+          v-else-if="preview && !preview.senderDomainVerified"
+          color="error"
+          icon="i-lucide-shield-alert"
+          :title="t('features.invoices.admin.emailDomainUnverified')"
+          variant="outline"
+        >
+          <template #description>
+            <p>{{ preview.senderDomain }}</p>
+            <UButton
+              to="https://resend.com/docs/dashboard/domains/introduction"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="neutral"
+              variant="solid"
+              size="xs"
+              trailing-icon="i-lucide-external-link"
+              class="mt-2"
+            >
+              {{ t('features.invoices.admin.emailDomainVerificationHelp') }}
+            </UButton>
+          </template>
+        </UAlert>
+        <UAlert
+          v-if="preview && preview.totalAttachmentSize > preview.maximumAttachmentSize"
+          color="error"
+          icon="i-lucide-file-warning"
+          :title="t('features.invoices.admin.emailAttachmentsTooLarge')"
+          variant="outline"
+        />
+        <div class="grid gap-3 sm:grid-cols-2">
+          <UFormField name="to" :label="t('features.invoices.admin.recipientEmail')">
+            <UInput v-model="draft.to" type="email" class="w-full" /> </UFormField
+          ><UFormField name="cc" label="CC">
+            <UInput v-model="draft.cc" :placeholder="t('features.invoices.admin.ccPlaceholder')" class="w-full" />
+          </UFormField>
+        </div>
+        <UFormField name="locale" :label="t('features.invoices.admin.emailLanguage')">
+          <p class="text-sm text-muted">{{ t(`features.invoices.languages.${draft.locale}`) }}</p>
+        </UFormField>
+        <UFormField name="subject" :label="t('features.invoices.admin.emailSubject')">
+          <UInput v-model="draft.subject" class="w-full" />
+        </UFormField>
+        <UFormField name="body" :label="t('features.invoices.admin.emailBody')">
+          <UTextarea v-model="draft.body" :rows="8" class="w-full" />
+        </UFormField>
+        <div>
+          <p class="text-sm font-medium">{{ t('features.invoices.admin.emailAttachments') }}</p>
+          <ul class="mt-2 space-y-1 text-sm text-muted">
+            <li v-for="file in preview?.attachments" :key="file.fileName">
+              {{ file.fileName }} · {{ Math.ceil(file.size / 1024) }} KB
+            </li>
+          </ul>
+        </div>
+        <div class="flex justify-end gap-2">
+          <UButton type="button" color="neutral" variant="ghost" @click="emit('update:open', false)">
+            {{ t('features.invoices.cancel') }} </UButton
+          ><UButton
+            type="submit"
+            icon="i-lucide-send"
+            :loading="busy"
+            :disabled="
+              !preview?.emailProviderConfigured ||
+              !preview?.senderDomainVerified ||
+              (preview?.totalAttachmentSize ?? 0) > (preview?.maximumAttachmentSize ?? 0)
+            "
+          >
+            {{
+              t(
+                props.mode === 'reminder' ? 'features.invoices.admin.sendReminder' : 'features.invoices.admin.sendEmail'
+              )
+            }}
+          </UButton>
+        </div>
+      </UForm>
+    </template>
+  </UModal>
+</template>

package/app/components/InvoicesPageShell.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+withDefaults(defineProps<{ width?: 'default' | 'narrow' }>(), { width: 'default' })
+</script>
+
+<template>
+  <main class="mx-auto w-full px-4 py-6 sm:px-6" :class="width === 'narrow' ? 'max-w-4xl' : 'max-w-7xl'"><slot /></main>
+</template>

package/app/components/InvoicesSenderDetailsForm.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { OrganizationInvoiceProfileDto } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+const props = defineProps<{
+  profile: OrganizationInvoiceProfileDto
+  refresh: () => Promise<unknown>
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const invoices = useInvoices()
+const { isSystemAdmin } = usePortalSession()
+const canConfigureProvider = computed(() => isSystemAdmin.value)
+const busy = ref(false)
+const checkingDomain = ref(false)
+type DomainStatus = { email: string | null; domain: string | null; configured: boolean; verified: boolean }
+const { data: domainStatus, refresh: refreshDomainStatus } = await useFetch<DomainStatus>(
+  '/api/invoices/admin/email-domain'
+)
+const draft = reactive({
+  address: '',
+  registrationNumber: '',
+  vatNumber: '',
+  iban: '',
+  bic: '',
+  invoiceEmail: ''
+})
+const schema = computed(() =>
+  z.object({
+    address: z.string().trim().min(1, t('features.invoices.validation.required')).max(1000),
+    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),
+    bic: z.string().trim().min(1, t('features.invoices.validation.required')).max(100),
+    invoiceEmail: z
+      .string()
+      .trim()
+      .min(1, t('features.invoices.validation.required'))
+      .email(t('features.invoices.validation.validEmail'))
+      .max(320)
+  })
+)
+
+const checkDomain = async (forceRefresh = true) => {
+  checkingDomain.value = true
+  try {
+    const status = await $fetch<DomainStatus>('/api/invoices/admin/email-domain', {
+      query: forceRefresh ? { refresh: '1' } : undefined
+    })
+    domainStatus.value = status
+    toast.add({
+      title: t(
+        status.verified
+          ? 'features.invoices.admin.emailDomainNowVerified'
+          : 'features.invoices.admin.emailDomainStillUnverified'
+      ),
+      color: status.verified ? 'success' : 'warning'
+    })
+  } catch (error) {
+    toast.add({
+      title: t('features.invoices.admin.emailDomainCheckFailed'),
+      description: String(error),
+      color: 'error'
+    })
+  } finally {
+    checkingDomain.value = false
+  }
+}
+
+watch(
+  () => props.profile,
+  (profile) => {
+    Object.assign(draft, {
+      address: profile.address,
+      registrationNumber: profile.registrationNumber ?? '',
+      vatNumber: profile.vatNumber ?? '',
+      iban: profile.iban ?? '',
+      bic: profile.bic ?? '',
+      invoiceEmail: profile.invoiceEmail ?? ''
+    })
+  },
+  { immediate: true }
+)
+
+const save = async () => {
+  busy.value = true
+  try {
+    const input = Object.fromEntries(
+      Object.entries(draft).map(([key, value]) => [key, value || (key === 'address' ? '' : null)])
+    )
+    await invoices.updateSettings({
+      enabled: props.profile.enabled,
+      currency: props.profile.currency,
+      defaultVatRateBasisPoints: props.profile.defaultVatRateBasisPoints,
+      preferredLocale: props.profile.preferredLocale,
+      ...input
+    } as never)
+    await props.refresh()
+    await refreshDomainStatus()
+    toast.add({ title: t('features.invoices.messages.senderInvoiceDetailsSaved'), color: 'success' })
+  } catch (error) {
+    toast.add({
+      title: t('features.invoices.messages.saveError'),
+      description: String(error),
+      color: 'error'
+    })
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <UCard id="sender-invoice-details" class="scroll-mt-6">
+    <template #header>
+      <h2 class="font-semibold">
+        {{ t('features.invoices.admin.senderInvoiceDetails') }}
+      </h2>
+    </template>
+    <UForm :state="draft" :schema="schema" class="space-y-4" @submit="save">
+      <UAlert
+        v-if="!domainStatus?.configured"
+        color="warning"
+        icon="i-lucide-key-round"
+        :title="t('features.invoices.admin.emailProviderNotConfigured')"
+        variant="outline"
+      >
+        <template #description>
+          <p>
+            {{
+              t(
+                canConfigureProvider
+                  ? 'features.invoices.admin.emailProviderConfigureDescription'
+                  : 'features.invoices.admin.emailProviderContactOwner'
+              )
+            }}
+          </p>
+          <UButton
+            v-if="canConfigureProvider"
+            to="/admin/email"
+            color="neutral"
+            variant="solid"
+            size="xs"
+            icon="i-lucide-settings"
+            class="mt-2"
+          >
+            {{ t('features.invoices.admin.emailProviderOpenSettings') }}
+          </UButton>
+        </template>
+      </UAlert>
+      <UAlert
+        v-else
+        :color="domainStatus?.verified ? 'success' : 'warning'"
+        :icon="domainStatus?.verified ? 'i-lucide-badge-check' : 'i-lucide-triangle-alert'"
+        :title="
+          t(
+            domainStatus?.verified
+              ? 'features.invoices.admin.emailDomainVerified'
+              : 'features.invoices.admin.emailDomainUnverified'
+          )
+        "
+        variant="outline"
+      >
+        <template #description>
+          <p>
+            {{
+              domainStatus?.domain
+                ? t(
+                    domainStatus.verified
+                      ? 'features.invoices.admin.emailDomainVerifiedDescription'
+                      : 'features.invoices.admin.emailDomainStatusDescription',
+                    { domain: domainStatus.domain }
+                  )
+                : t('features.invoices.admin.emailDomainMissing')
+            }}
+          </p>
+          <div v-if="domainStatus?.domain" class="mt-2 flex flex-wrap gap-2">
+            <UButton
+              v-if="!domainStatus.verified"
+              to="https://resend.com/docs/dashboard/domains/introduction"
+              target="_blank"
+              rel="noopener noreferrer"
+              color="neutral"
+              variant="solid"
+              size="xs"
+              trailing-icon="i-lucide-external-link"
+            >
+              {{ t('features.invoices.admin.emailDomainVerificationHelp') }} </UButton
+            ><UButton
+              type="button"
+              color="neutral"
+              variant="solid"
+              size="xs"
+              icon="i-lucide-refresh-cw"
+              :loading="checkingDomain"
+              @click="checkDomain()"
+            >
+              {{ t('features.invoices.admin.emailDomainCheckAgain') }}
+            </UButton>
+          </div>
+        </template>
+      </UAlert>
+      <UFormField name="address" :label="t('features.invoices.admin.address')" required>
+        <UTextarea v-model="draft.address" 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" />
+        </UFormField>
+        <UFormField name="vatNumber" :label="t('features.invoices.admin.vatNumber')" required>
+          <UInput v-model="draft.vatNumber" class="w-full" />
+        </UFormField>
+        <UFormField name="iban" label="IBAN" required>
+          <UInput v-model="draft.iban" class="w-full" />
+        </UFormField>
+        <UFormField name="bic" label="BIC" required>
+          <UInput v-model="draft.bic" class="w-full" />
+        </UFormField>
+        <UFormField name="invoiceEmail" :label="t('features.invoices.admin.invoiceEmail')" required>
+          <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>
+    </UForm>
+  </UCard>
+</template>

package/app/composables/useInvoiceSources.ts

@@ -0,0 +1,9 @@
+import type { InvoiceSourceProvider } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+export const useInvoiceSources = () => {
+  const providers = useState<InvoiceSourceProvider[]>('invoice-source-providers', () => [])
+  const register = (provider: InvoiceSourceProvider) => {
+    providers.value = [...providers.value.filter((item) => item.id !== provider.id), provider]
+  }
+  return { providers: readonly(providers), register }
+}

package/app/composables/useInvoices.ts

@@ -0,0 +1,68 @@
+import type {
+  ClientInvoiceDto,
+  ClientInvoiceSupplierDto,
+  ClientInvoiceViewerDto,
+  InvoiceClientDto,
+  InvoiceClientAccessOverviewDto,
+  InvoiceDto,
+  InvoiceEmailPreviewDto,
+  InvoiceEmailStatusRefreshDto,
+  InvoiceSettingsDto
+} from '@nuxt-customer-portal/invoices/shared/types/invoice'
+
+export interface InvoicesAdminBootstrap {
+  settings: InvoiceSettingsDto
+  clients: InvoiceClientDto[]
+  organizationProfile: InvoiceSettingsDto & { name: string; logo: string | null }
+}
+
+export const useInvoices = () => ({
+  clientAccessOverview: (clientId: string) =>
+    $fetch<InvoiceClientAccessOverviewDto>(`/api/invoices/admin/clients/${clientId}/access`),
+  adminBootstrap: () => $fetch<InvoicesAdminBootstrap>('/api/invoices/admin/bootstrap'),
+  updateSettings: (input: Omit<InvoiceSettingsDto, 'organizationId'>) =>
+    $fetch('/api/invoices/admin/settings', { method: 'PUT', body: input }),
+  createInvoice: (input: Record<string, unknown>) =>
+    $fetch<{ id: string }>('/api/invoices/admin/invoices', { method: 'POST', body: input }),
+  getNextInvoiceNumber: () => $fetch<{ number: string }>('/api/invoices/admin/invoices/next-number'),
+  getInvoice: (id: string) => $fetch<InvoiceDto>(`/api/invoices/admin/invoices/${id}`),
+  updateInvoice: (id: string, input: Record<string, unknown>) =>
+    $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 } }),
+  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>) =>
+    $fetch(`/api/invoices/admin/invoices/${id}/email`, { method: 'POST', body: input }),
+  getInvoiceReminderPreview: (id: string, locale?: string) =>
+    $fetch<InvoiceEmailPreviewDto>(`/api/invoices/admin/invoices/${id}/reminder-preview`, { query: { locale } }),
+  sendInvoiceReminder: (id: string, input: Record<string, unknown>) =>
+    $fetch(`/api/invoices/admin/invoices/${id}/reminder`, { method: 'POST', body: input }),
+  refreshInvoiceEmailStatuses: (id: string, forceRefresh = false) =>
+    $fetch<InvoiceEmailStatusRefreshDto>(`/api/invoices/admin/invoices/${id}/email-status`, {
+      method: 'POST',
+      query: forceRefresh ? { refresh: '1' } : undefined
+    }),
+  registerInvoicePayment: (id: string, input: Record<string, unknown>) =>
+    $fetch(`/api/invoices/admin/invoices/${id}/payments`, { method: 'POST', body: input }),
+  uploadInvoiceAttachment: (id: string, file: File) => {
+    const body = new FormData()
+    body.append('file', file)
+    return $fetch(`/api/invoices/admin/invoices/${id}/attachments`, { method: 'POST', body })
+  },
+  addInvoiceAttachment: (id: string, file: File) => {
+    const body = new FormData()
+    body.append('file', file)
+    return $fetch(`/api/invoices/admin/invoices/${id}/attachments`, { method: 'POST', body })
+  },
+  deleteInvoiceAttachment: (id: string, attachmentId: string) =>
+    $fetch(`/api/invoices/admin/invoices/${id}/attachments/${attachmentId}`, { method: 'DELETE' }),
+  clientInvoiceSuppliers: () => $fetch<ClientInvoiceSupplierDto[]>('/api/invoices/client/suppliers'),
+  clientInvoiceViewers: (accessId: string) =>
+    $fetch<ClientInvoiceViewerDto[]>(`/api/invoices/client/${accessId}/viewers`),
+  setClientInvoiceViewer: (accessId: string, userId: string, assigned: boolean) =>
+    $fetch(`/api/invoices/client/${accessId}/viewers`, { method: 'PUT', body: { userId, assigned } }),
+  getClientInvoice: (id: string) => $fetch<ClientInvoiceDto>(`/api/invoices/client/invoices/${id}`)
+})

package/app/composables/useInvoicesAdminList.ts

@@ -0,0 +1,113 @@
+import type { InvoicesListResponse } from '@nuxt-customer-portal/invoices/shared/types/invoice'
+import { usePaginatedResource } from '@nuxt-customer-portal/core/app/composables/usePaginatedResource'
+
+export const useInvoicesAdminList = <Item>(options: {
+  endpoint: string
+  filterKeys?: string[]
+  defaultFilters?: Record<string, string>
+  defaultSort: string
+  defaultSortDir?: 'asc' | 'desc'
+}) => {
+  const route = useRoute()
+  const router = useRouter()
+  const pageSize = 20
+  const defaultSortDir = options.defaultSortDir ?? 'asc'
+  const search = ref(String(route.query.search ?? ''))
+  const sortBy = ref(String(route.query.sortBy ?? options.defaultSort))
+  const sortDir = ref<'asc' | 'desc'>(route.query.sortDir === 'desc' ? 'desc' : defaultSortDir)
+  const currentPage = ref(Math.max(1, Number(route.query.page) || 1))
+  const filters = reactive<Record<string, string | undefined>>(
+    Object.fromEntries(
+      (options.filterKeys ?? []).map((key) => [
+        key,
+        route.query[key] ? String(route.query[key]) : options.defaultFilters?.[key]
+      ])
+    )
+  )
+  const resource = usePaginatedResource<Item, Record<string, string | undefined>>({
+    pageSize,
+    getKey: (item) => (item as { id: string }).id,
+    fetchPage: ({ filters: query, page, pageSize, signal }) =>
+      $fetch<InvoicesListResponse<Item>>(options.endpoint, { query: { ...query, page, pageSize }, signal })
+  })
+  const query = () => ({
+    ...(search.value.trim() ? { search: search.value.trim() } : {}),
+    ...Object.fromEntries(Object.entries(filters).filter(([, value]) => value)),
+    ...(sortBy.value !== options.defaultSort ? { sortBy: sortBy.value } : {}),
+    ...(sortDir.value !== defaultSortDir ? { sortDir: sortDir.value } : {})
+  })
+  const routeQuery = () => ({
+    ...(search.value.trim() ? { search: search.value.trim() } : {}),
+    ...Object.fromEntries(
+      Object.entries(filters).filter(([key, value]) => value && value !== options.defaultFilters?.[key])
+    ),
+    ...(sortBy.value !== options.defaultSort ? { sortBy: sortBy.value } : {}),
+    ...(sortDir.value !== defaultSortDir ? { sortDir: sortDir.value } : {})
+  })
+  const syncRoute = (page = currentPage.value) =>
+    router.replace({ path: route.path, query: { ...routeQuery(), ...(page > 1 ? { page: String(page) } : {}) } })
+  const load = async (page = currentPage.value) => {
+    const result = await resource.loadPage(query(), { page, pageSize })
+    if (result) {
+      currentPage.value = result.pagination.page
+    }
+    return result
+  }
+  const resetAndLoad = async () => {
+    currentPage.value = 1
+    await syncRoute(1)
+    await load(1)
+  }
+  const loadNext = async () => {
+    const result = await resource.loadNextPage(query())
+    if (result) {
+      currentPage.value = result.pagination.page
+      await syncRoute(currentPage.value)
+    }
+  }
+  const loadPrevious = async () => {
+    const result = await resource.loadPreviousPage(query())
+    if (result) {
+      currentPage.value = result.pagination.page
+      await syncRoute(currentPage.value)
+    }
+    return result
+  }
+  const goToPage = async (page: number) => {
+    currentPage.value = page
+    await syncRoute(page)
+    await load(page)
+  }
+  const setFilter = (key: string, value: string | undefined) => {
+    filters[key] = value
+  }
+  const toggleSortDir = () => {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+  }
+  let searchTimer: ReturnType<typeof setTimeout> | undefined
+  watch(search, () => {
+    clearTimeout(searchTimer)
+    searchTimer = setTimeout(() => {
+      void resetAndLoad()
+    }, 300)
+  })
+  watch([sortBy, sortDir, ...Object.keys(filters).map((key) => () => filters[key])], () => {
+    void resetAndLoad()
+  })
+  onScopeDispose(() => clearTimeout(searchTimer))
+  return {
+    ...resource,
+    search,
+    filters,
+    sortBy,
+    sortDir,
+    currentPage,
+    load,
+    refresh: load,
+    loadNext,
+    loadPrevious,
+    goToPage,
+    setFilter,
+    toggleSortDir
+  }
+}