@nuxt-customer-portal/clients 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @nuxt-customer-portal/clients
+
+## 0.3.0
+
+### Patch Changes
+
+- @nuxt-customer-portal/core@0.3.0
+- @nuxt-customer-portal/ui@0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nuxt Customer Portal contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Clients layer
+
+Owns CLIENT organizations, business profiles, memberships, invitations, archival, and generic feature-module activations. Feature layers depend on its public server contracts instead of implementing their own client directories.

package/app/components/ClientsClientDetail.vue

@@ -0,0 +1,407 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { GenericClientDto } from '@nuxt-customer-portal/clients/shared/types/client'
+
+const props = defineProps<{ client: GenericClientDto; refresh: () => Promise<unknown> }>()
+const emit = defineEmits<{ deleted: [] }>()
+const { t } = useI18n()
+const toast = useToast()
+const api = useClients()
+const { clientIntegrations } = usePortalFeatures()
+const busy = ref(false)
+const editing = ref(false)
+const deleting = ref(false)
+const deleteName = ref('')
+const deletion = ref<{ canDelete: boolean; memberCount: number; moduleCount: number; clientName: string } | null>(null)
+const invitationForm = reactive({ email: '', role: 'member' as 'member' | 'admin' | 'owner' })
+const invitationSchema = computed(() =>
+  z.object({
+    email: z.string().trim().email(t('features.clients.validation.email')),
+    role: z.enum(['member', 'admin', 'owner'])
+  })
+)
+
+onKeyStroke('Escape', () => {
+  editing.value = false
+  deleting.value = false
+})
+
+const save = async (input: Record<string, unknown>) => {
+  busy.value = true
+  try {
+    await api.update(props.client.id, input)
+    editing.value = false
+    await props.refresh()
+    toast.add({ title: t('features.clients.saved'), color: 'success' })
+  } catch (error) {
+    toast.add({ title: t('features.clients.saveFailed'), description: String(error), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+
+const toggleModule = async (moduleId: string, enabled: boolean) => {
+  busy.value = true
+  try {
+    await api.setModule(props.client.id, moduleId, enabled)
+    await props.refresh()
+  } finally {
+    busy.value = false
+  }
+}
+
+const toggleArchive = async () => {
+  busy.value = true
+  try {
+    await api.archive(props.client.id, !props.client.archivedAt)
+    await props.refresh()
+  } finally {
+    busy.value = false
+  }
+}
+
+const requestDelete = async () => {
+  editing.value = false
+  deleting.value = !deleting.value
+  deleteName.value = ''
+  deletion.value = deleting.value ? await api.deletion(props.client.id) : null
+}
+
+const confirmDelete = async () => {
+  busy.value = true
+  try {
+    await api.remove(props.client.id, deleteName.value)
+    toast.add({ title: t('features.clients.deleted'), color: 'success' })
+    emit('deleted')
+  } finally {
+    busy.value = false
+  }
+}
+
+const inviteMember = async () => {
+  busy.value = true
+  try {
+    await api.invite(props.client.id, invitationForm.email.trim(), invitationForm.role)
+    invitationForm.email = ''
+    invitationForm.role = 'member'
+    await props.refresh()
+    toast.add({ title: t('features.clients.invited'), color: 'success' })
+  } catch {
+    toast.add({ title: t('features.clients.inviteFailed'), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+
+const memberToRemove = ref<{ id: string; name: string; email: string } | null>(null)
+const showRemoveMemberConfirmation = ref(false)
+const requestRemoveMember = (member: { id: string; name: string; email: string }) => {
+  memberToRemove.value = member
+  showRemoveMemberConfirmation.value = true
+}
+
+const changeMemberRole = async (memberId: string, role: string) => {
+  busy.value = true
+  try {
+    await api.updateMember(props.client.id, memberId, { role })
+    await props.refresh()
+  } finally {
+    busy.value = false
+  }
+}
+
+const removeMember = async () => {
+  if (!memberToRemove.value || busy.value) {
+    return
+  }
+  const memberId = memberToRemove.value.id
+  busy.value = true
+  try {
+    await api.removeMember(props.client.id, memberId)
+    await props.refresh()
+    toast.add({ title: t('features.clients.memberRemoved'), color: 'success' })
+  } catch {
+    toast.add({ title: t('features.clients.removeMemberFailed'), color: 'error' })
+  } finally {
+    busy.value = false
+    memberToRemove.value = null
+  }
+}
+
+const toggleEditing = () => {
+  editing.value = !editing.value
+  deleting.value = false
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <header class="flex flex-col gap-3 border-b border-default pb-5 sm:flex-row sm:items-end sm:justify-between">
+      <div class="flex min-w-0 items-center gap-3">
+        <UAvatar :src="client.avatarLogo || client.logo || undefined" :alt="client.name" size="lg" />
+        <div class="min-w-0">
+          <div class="flex flex-wrap items-center gap-2">
+            <h1 class="truncate text-2xl font-semibold">{{ client.name }}</h1>
+            <UBadge :color="client.archivedAt ? 'neutral' : 'success'" variant="subtle">
+              {{ t(client.archivedAt ? 'features.clients.archived' : 'features.clients.active') }}
+            </UBadge>
+          </div>
+          <p class="text-sm text-muted">{{ client.officialName }}</p>
+        </div>
+      </div>
+      <UButton size="sm" variant="outline" icon="i-lucide-pencil" @click="toggleEditing">
+        {{ t('features.clients.edit') }}
+      </UButton>
+    </header>
+
+    <ClientsClientForm
+      v-if="editing"
+      :client="client"
+      :editing="true"
+      :busy="busy"
+      @submit="save"
+      @cancel="editing = false"
+    />
+
+    <UCard v-else>
+      <template #header>
+        <h2 class="font-semibold">{{ t('features.clients.profile') }}</h2>
+      </template>
+      <dl class="grid gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.clients.name') }}</dt>
+          <dd class="font-medium">{{ client.name }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.clients.officialName') }}</dt>
+          <dd>{{ client.officialName }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.clients.slug') }}</dt>
+          <dd class="font-mono text-sm">{{ client.slug }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.clients.registrationNumber') }}</dt>
+          <dd>{{ client.registrationNumber || '—' }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.clients.vatNumber') }}</dt>
+          <dd>{{ client.vatNumber || '—' }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.clients.invoiceEmail') }}</dt>
+          <dd>{{ client.invoiceEmail || '—' }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.clients.locale') }}</dt>
+          <dd>{{ client.preferredLocale === 'nl' ? 'Nederlands' : 'English' }}</dd>
+        </div>
+        <div class="sm:col-span-2 lg:col-span-3">
+          <dt class="text-sm text-muted">{{ t('features.clients.address') }}</dt>
+          <dd class="whitespace-pre-line">{{ client.address || '—' }}</dd>
+        </div>
+      </dl>
+    </UCard>
+
+    <UCard>
+      <template #header>
+        <h2 class="font-semibold">{{ t('features.clients.members') }}</h2>
+      </template>
+      <div class="grid gap-4">
+        <UForm
+          :state="invitationForm"
+          :schema="invitationSchema"
+          novalidate
+          class="grid items-start gap-2 sm:grid-cols-[minmax(0,1fr)_150px_auto]"
+          @submit="inviteMember"
+        >
+          <UFormField name="email">
+            <UInput
+              v-model="invitationForm.email"
+              type="email"
+              :placeholder="t('features.clients.memberEmail')"
+              class="w-full"
+            />
+          </UFormField>
+          <UFormField name="role">
+            <USelect v-model="invitationForm.role" :items="['member', 'admin', 'owner']" class="w-full" />
+          </UFormField>
+          <UButton type="submit" :disabled="!invitationForm.email.trim()" :loading="busy">
+            {{ t('features.clients.invite') }}
+          </UButton>
+        </UForm>
+        <div v-if="client.members.length" class="grid gap-2">
+          <div
+            v-for="item in client.members"
+            :key="item.id"
+            class="flex flex-col gap-3 rounded-md border border-default p-3 sm:flex-row sm:items-center sm:justify-between"
+          >
+            <div class="flex min-w-0 items-center gap-3">
+              <UAvatar :src="item.image ?? undefined" :alt="item.name" size="sm" />
+              <div class="min-w-0">
+                <p class="truncate font-medium">{{ item.name }}</p>
+                <p class="truncate text-sm text-muted">
+                  {{ item.email }}<template v-if="item.jobTitle"> · {{ item.jobTitle }}</template>
+                </p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <USelect
+                :model-value="item.role"
+                :items="['member', 'admin', 'owner']"
+                size="xs"
+                @update:model-value="changeMemberRole(item.id, String($event))"
+              />
+              <UButton
+                icon="i-lucide-trash-2"
+                color="error"
+                variant="outline"
+                size="xs"
+                :disabled="busy"
+                :aria-label="t('features.clients.removeMember')"
+                @click.stop="requestRemoveMember(item)"
+                >{{ t('features.clients.removeMember') }}</UButton
+              >
+            </div>
+          </div>
+        </div>
+        <p v-else class="text-sm text-muted">{{ t('features.clients.noMembers') }}</p>
+
+        <div class="border-t border-default pt-4">
+          <h3 class="mb-3 text-sm font-semibold">
+            {{ t('features.clients.pendingInvitations') }} ({{ client.invitations.length }})
+          </h3>
+          <div v-if="client.invitations.length" class="grid gap-2">
+            <div
+              v-for="invitation in client.invitations"
+              :key="invitation.id"
+              class="flex flex-wrap items-center justify-between gap-3 rounded-md border border-default p-3"
+            >
+              <div class="min-w-0">
+                <p class="truncate font-medium">{{ invitation.email }}</p>
+                <p class="text-sm text-muted">
+                  {{
+                    t('features.clients.invitationExpires', {
+                      date: new Date(invitation.expiresAt).toLocaleDateString()
+                    })
+                  }}
+                </p>
+              </div>
+              <div class="flex items-center gap-2">
+                <UBadge color="warning" variant="soft">{{ t('features.clients.invitationPending') }}</UBadge
+                ><UBadge color="neutral" variant="soft">{{ invitation.role }}</UBadge>
+                <InvitationActions
+                  :endpoint="`/api/clients/${client.id}/invitations/${invitation.id}`"
+                  :email="invitation.email"
+                  :role="invitation.role"
+                  can-edit
+                  can-revoke
+                  @refresh="refresh()"
+                />
+              </div>
+            </div>
+          </div>
+          <p v-else class="text-sm text-muted">{{ t('features.clients.noPendingInvitations') }}</p>
+        </div>
+      </div>
+    </UCard>
+
+    <UCard>
+      <template #header>
+        <h2 class="font-semibold">{{ t('features.clients.modules') }}</h2>
+      </template>
+      <div class="grid gap-3">
+        <label
+          v-for="integration in clientIntegrations"
+          :key="integration.moduleId"
+          class="flex items-center justify-between rounded-md border border-default p-3"
+        >
+          <span>{{ t(integration.labelKey) }}</span>
+          <USwitch
+            :model-value="client.modules.some((item) => item.moduleId === integration.moduleId && item.enabled)"
+            :disabled="busy || Boolean(client.archivedAt)"
+            @update:model-value="toggleModule(integration.moduleId, $event)"
+          />
+        </label>
+      </div>
+    </UCard>
+
+    <component
+      :is="integration.detailComponent"
+      v-for="integration in clientIntegrations.filter(
+        (item) =>
+          item.detailComponent && client.modules.some((module) => module.moduleId === item.moduleId && module.enabled)
+      )"
+      :key="integration.moduleId"
+      :client="client"
+    />
+
+    <UCard>
+      <template #header>
+        <h2 class="font-semibold">{{ t('features.clients.lifecycle') }}</h2>
+      </template>
+      <div class="flex flex-wrap justify-between gap-3">
+        <UButton
+          color="neutral"
+          variant="outline"
+          :icon="client.archivedAt ? 'i-lucide-archive-restore' : 'i-lucide-archive'"
+          :loading="busy"
+          @click="toggleArchive"
+        >
+          {{ t(client.archivedAt ? 'features.clients.restore' : 'features.clients.archive') }}
+        </UButton>
+        <UButton color="error" variant="outline" icon="i-lucide-trash-2" @click="requestDelete">
+          {{ t('features.clients.delete') }}
+        </UButton>
+      </div>
+    </UCard>
+
+    <UCard v-if="deleting" class="border-error">
+      <template #header>
+        <h2 class="font-semibold text-error">
+          {{ t('features.clients.deleteTitle', { name: client.name }) }}
+        </h2>
+      </template>
+      <div class="space-y-4">
+        <p class="text-sm">
+          {{
+            deletion?.canDelete
+              ? t('features.clients.deleteDescription')
+              : t('features.clients.deleteBlocked', {
+                  members: deletion?.memberCount ?? 0,
+                  modules: deletion?.moduleCount ?? 0
+                })
+          }}
+        </p>
+        <UFormField v-if="deletion?.canDelete" :label="t('features.clients.typeName', { name: client.name })">
+          <UInput v-model="deleteName" />
+        </UFormField>
+        <div class="flex justify-end gap-2">
+          <UButton color="neutral" variant="outline" @click="deleting = false">
+            {{ t('features.clients.cancel') }}
+          </UButton>
+          <UButton
+            v-if="deletion?.canDelete"
+            color="error"
+            icon="i-lucide-trash-2"
+            :disabled="deleteName !== client.name"
+            :loading="busy"
+            @click="confirmDelete"
+          >
+            {{ t('features.clients.delete') }}
+          </UButton>
+        </div>
+      </div>
+    </UCard>
+    <ConfirmationModal
+      v-model:open="showRemoveMemberConfirmation"
+      title="features.clients.removeMember"
+      message="features.clients.confirmRemoveMember"
+      :message-params="{ name: memberToRemove?.name ?? '', email: memberToRemove?.email ?? '', client: client.name }"
+      confirm-text="features.clients.removeMember"
+      confirm-color="error"
+      @confirm="removeMember"
+      @cancel="memberToRemove = null"
+    />
+  </div>
+</template>

package/app/components/ClientsClientForm.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { GenericClientDto } from '@nuxt-customer-portal/clients/shared/types/client'
+
+const props = defineProps<{ client?: GenericClientDto | null; busy?: boolean; editing?: boolean }>()
+const emit = defineEmits<{ submit: [value: Record<string, unknown>]; cancel: [] }>()
+const { t } = useI18n()
+const form = reactive({
+  name: '',
+  slug: '',
+  officialName: '',
+  address: '',
+  registrationNumber: '',
+  vatNumber: '',
+  invoiceEmail: '',
+  preferredLocale: 'nl' as 'nl' | 'en'
+})
+const schema = computed(() =>
+  z.object({
+    name: z.string().trim().min(2, t('features.clients.validation.name')).max(160),
+    slug: props.editing
+      ? z.string()
+      : z
+          .string()
+          .trim()
+          .min(1, t('features.clients.validation.slug'))
+          .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, t('features.clients.validation.slug')),
+    officialName: z.string().trim().min(2, t('features.clients.validation.officialName')).max(200),
+    address: z.string().trim().max(1000),
+    registrationNumber: z.string().trim().max(200),
+    vatNumber: z.string().trim().max(100),
+    invoiceEmail: z.union([z.literal(''), z.string().trim().email(t('features.clients.validation.email')).max(320)]),
+    preferredLocale: z.enum(['nl', 'en'])
+  })
+)
+const reset = () =>
+  Object.assign(
+    form,
+    props.client
+      ? {
+          name: props.client.name,
+          slug: props.client.slug,
+          officialName: props.client.officialName,
+          address: props.client.address,
+          registrationNumber: props.client.registrationNumber ?? '',
+          vatNumber: props.client.vatNumber ?? '',
+          invoiceEmail: props.client.invoiceEmail ?? '',
+          preferredLocale: props.client.preferredLocale
+        }
+      : {
+          name: '',
+          slug: '',
+          officialName: '',
+          address: '',
+          registrationNumber: '',
+          vatNumber: '',
+          invoiceEmail: '',
+          preferredLocale: 'nl'
+        }
+  )
+watch(() => props.client, reset, { immediate: true })
+const submit = () =>
+  emit('submit', {
+    name: form.name.trim(),
+    ...(props.editing ? {} : { slug: form.slug.trim() }),
+    officialName: form.officialName.trim(),
+    address: form.address.trim(),
+    registrationNumber: form.registrationNumber.trim() || null,
+    vatNumber: form.vatNumber.trim() || null,
+    invoiceEmail: form.invoiceEmail.trim().toLowerCase() || null,
+    preferredLocale: form.preferredLocale
+  })
+</script>
+
+<template>
+  <UCard class="scroll-mt-24">
+    <template #header>
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="font-semibold">{{ t(editing ? 'features.clients.editTitle' : 'features.clients.createTitle') }}</h2>
+        <UButton
+          type="button"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-x"
+          :aria-label="t('features.clients.close')"
+          @click="emit('cancel')"
+        />
+      </div>
+    </template>
+    <UForm :state="form" :schema="schema" class="space-y-4" @submit="submit">
+      <div class="grid gap-4 md:grid-cols-2">
+        <UFormField name="name" :label="t('features.clients.name')" required>
+          <UInput v-model="form.name" class="w-full" />
+        </UFormField>
+        <UFormField name="slug" :label="t('features.clients.slug')" :required="!editing">
+          <UInput v-model="form.slug" :disabled="editing" class="w-full" />
+        </UFormField>
+        <UFormField name="officialName" :label="t('features.clients.officialName')" required>
+          <UInput v-model="form.officialName" class="w-full" />
+        </UFormField>
+        <UFormField name="invoiceEmail" :label="t('features.clients.invoiceEmail')">
+          <UInput v-model="form.invoiceEmail" type="email" class="w-full" />
+        </UFormField>
+        <UFormField name="registrationNumber" :label="t('features.clients.registrationNumber')">
+          <UInput v-model="form.registrationNumber" class="w-full" />
+        </UFormField>
+        <UFormField name="vatNumber" :label="t('features.clients.vatNumber')">
+          <UInput v-model="form.vatNumber" class="w-full" />
+        </UFormField>
+        <UFormField name="preferredLocale" :label="t('features.clients.locale')">
+          <USelect
+            v-model="form.preferredLocale"
+            :items="[
+              { label: 'Nederlands', value: 'nl' },
+              { label: 'English', value: 'en' }
+            ]"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+      <UFormField name="address" :label="t('features.clients.address')">
+        <UTextarea v-model="form.address" class="w-full" />
+      </UFormField>
+      <div class="flex justify-end gap-2">
+        <UButton type="button" color="neutral" variant="outline" @click="emit('cancel')">
+          {{ t('features.clients.cancel') }}
+        </UButton>
+        <UButton type="submit" :loading="busy" icon="i-lucide-save">
+          {{ t(editing ? 'features.clients.save' : 'features.clients.create') }}
+        </UButton>
+      </div>
+    </UForm>
+  </UCard>
+</template>

package/app/components/ClientsClientPicker.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { GenericClientDto } from '@nuxt-customer-portal/clients/shared/types/client'
+
+const props = defineProps<{ modelValue?: string; moduleId?: string; label?: string; required?: boolean }>()
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+const { data: clients, status } = await useFetch<GenericClientDto[]>('/api/clients/selectable', {
+  query: computed(() => ({ moduleId: props.moduleId }))
+})
+const items = computed(() => (clients.value ?? []).map((client) => ({ label: client.name, value: client.id })))
+</script>
+
+<template>
+  <UFormField :label="label" name="clientOrganizationId" :required="required">
+    <USelect
+      :model-value="modelValue"
+      :items="items"
+      value-key="value"
+      class="w-full"
+      size="lg"
+      :loading="status === 'pending'"
+      @update:model-value="emit('update:modelValue', String($event))"
+    />
+  </UFormField>
+</template>

package/app/composables/useClients.ts

@@ -0,0 +1,25 @@
+import type { GenericClientDto, ClientListResponse } from '@nuxt-customer-portal/clients/shared/types/client'
+
+export const useClients = () => ({
+  list: (query: Record<string, string | number | undefined>) => $fetch<ClientListResponse>('/api/clients', { query }),
+  get: (id: string) => $fetch<GenericClientDto>(`/api/clients/${id}`),
+  create: (input: Record<string, unknown>) => $fetch<GenericClientDto>('/api/clients', { method: 'POST', body: input }),
+  update: (id: string, input: Record<string, unknown>) =>
+    $fetch<GenericClientDto>(`/api/clients/${id}`, { method: 'PATCH', body: input }),
+  archive: (id: string, archived: boolean) =>
+    $fetch<GenericClientDto>(`/api/clients/${id}/archive`, { method: 'PATCH', body: { archived } }),
+  setModule: (id: string, moduleId: string, enabled: boolean) =>
+    $fetch<GenericClientDto>(`/api/clients/${id}/modules/${moduleId}`, { method: 'PUT', body: { enabled } }),
+  invite: (id: string, email: string, role: string) =>
+    $fetch(`/api/clients/${id}/invitations`, { method: 'POST', body: { email, role } }),
+  updateMember: (id: string, memberId: string, input: Record<string, unknown>) =>
+    $fetch(`/api/clients/${id}/members/${memberId}`, { method: 'PATCH', body: input }),
+  removeMember: (id: string, memberId: string) =>
+    $fetch(`/api/clients/${id}/members/${memberId}`, { method: 'DELETE' as never }),
+  deletion: (id: string) =>
+    $fetch<{ canDelete: boolean; memberCount: number; moduleCount: number; clientName: string }>(
+      `/api/clients/${id}/deletion`
+    ),
+  remove: (id: string, clientName: string) =>
+    $fetch(`/api/clients/${id}`, { method: 'DELETE' as never, body: { clientName } })
+})

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const route = useRoute()
+const { t } = useI18n()
+const api = useClients()
+const clientId = computed(() => String(route.params.id))
+const returnTo = computed(() => {
+  const value = Array.isArray(route.query.returnTo) ? route.query.returnTo[0] : route.query.returnTo
+  return typeof value === 'string' && (value === '/clients' || value.startsWith('/clients?')) ? value : '/clients'
+})
+const {
+  data: client,
+  pending,
+  error,
+  refresh
+} = await useAsyncData(`client-${clientId.value}`, () => api.get(clientId.value))
+
+useSeoMeta({
+  title: computed(() => client.value?.name ?? t('features.clients.title'))
+})
+
+const handleDeleted = async () => {
+  await navigateTo(returnTo.value)
+}
+</script>
+
+<template>
+  <div class="h-full min-h-0 overflow-y-auto">
+    <div class="mx-auto flex max-w-[1440px] flex-col gap-4 p-4 sm:p-6 lg:p-8">
+      <UButton :to="returnTo" variant="link" color="neutral" icon="i-lucide-arrow-left" class="w-fit px-0">
+        {{ t('features.clients.backToClients') }}
+      </UButton>
+
+      <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.clients.loading') }}</span>
+      </div>
+      <UAlert
+        v-else-if="error"
+        color="error"
+        icon="i-lucide-circle-alert"
+        :title="t('features.clients.notFound')"
+        variant="outline"
+      />
+      <ClientsClientDetail v-else-if="client" :client="client" :refresh="refresh" @deleted="handleDeleted" />
+    </div>
+  </div>
+</template>