From 34c0b4b1fbe75504b4c77b589976715b6aa0f77d Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Wed, 19 Feb 2025 17:55:57 +0100
Subject: [PATCH] feat(app): improve customers (#105)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 app/_components/users/UsersForm.vue      |  71 ------
 app/_pages/inbox.vue                     | 190 --------------
 app/_pages/index.vue                     |  90 -------
 app/_pages/users.vue                     | 177 -------------
 app/components/customers/AddModal.vue    |  59 +++++
 app/components/customers/DeleteModal.vue |  40 +++
 app/pages/customers.vue                  | 308 +++++++++++++++++++++++
 app/pages/index.vue                      |   2 +-
 package.json                             |   5 +-
 pnpm-lock.yaml                           |  26 +-
 server/api/{users.ts => customers.ts}    |  31 +--
 11 files changed, 432 insertions(+), 567 deletions(-)
 delete mode 100644 app/_components/users/UsersForm.vue
 delete mode 100644 app/_pages/inbox.vue
 delete mode 100644 app/_pages/index.vue
 delete mode 100644 app/_pages/users.vue
 create mode 100644 app/components/customers/AddModal.vue
 create mode 100644 app/components/customers/DeleteModal.vue
 rename server/api/{users.ts => customers.ts} (80%)

diff --git a/app/_components/users/UsersForm.vue b/app/_components/users/UsersForm.vue
deleted file mode 100644
index bf37dd0..0000000
--- a/app/_components/users/UsersForm.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import type { FormError, FormSubmitEvent } from '#ui/types'
-
-const emit = defineEmits(['close'])
-
-const state = reactive({
-  name: undefined,
-  email: undefined
-})
-
-// https://ui.nuxt.com/components/form
-const validate = (state: any): FormError[] => {
-  const errors = []
-  if (!state.name) errors.push({ path: 'name', message: 'Please enter a name.' })
-  if (!state.email) errors.push({ path: 'email', message: 'Please enter an email.' })
-  return errors
-}
-
-async function onSubmit(event: FormSubmitEvent<any>) {
-  // Do something with data
-  console.log(event.data)
-
-  emit('close')
-}
-</script>
-
-<template>
-  <UForm
-    :validate="validate"
-    :validate-on="['submit']"
-    :state="state"
-    class="space-y-4"
-    @submit="onSubmit"
-  >
-    <UFormGroup
-      label="Name"
-      name="name"
-    >
-      <UInput
-        v-model="state.name"
-        placeholder="John Doe"
-        autofocus
-      />
-    </UFormGroup>
-
-    <UFormGroup
-      label="Email"
-      name="email"
-    >
-      <UInput
-        v-model="state.email"
-        type="email"
-        placeholder="john.doe@example.com"
-      />
-    </UFormGroup>
-
-    <div class="flex justify-end gap-3">
-      <UButton
-        label="Cancel"
-        color="gray"
-        variant="ghost"
-        @click="emit('close')"
-      />
-      <UButton
-        type="submit"
-        label="Save"
-        color="black"
-      />
-    </div>
-  </UForm>
-</template>
diff --git a/app/_pages/inbox.vue b/app/_pages/inbox.vue
deleted file mode 100644
index cfe3451..0000000
--- a/app/_pages/inbox.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<script setup lang="ts">
-import type { Mail } from '~/types'
-
-const tabItems = [{
-  label: 'All'
-}, {
-  label: 'Unread'
-}]
-const selectedTab = ref(0)
-
-const dropdownItems = [[{
-  label: 'Mark as unread',
-  icon: 'i-heroicons-check-circle'
-}, {
-  label: 'Mark as important',
-  icon: 'i-heroicons-exclamation-circle'
-}], [{
-  label: 'Star thread',
-  icon: 'i-heroicons-star'
-}, {
-  label: 'Mute thread',
-  icon: 'i-heroicons-pause-circle'
-}]]
-
-const { data: mails } = await useFetch<Mail[]>('/api/mails', { default: () => [] })
-
-// Filter mails based on the selected tab
-const filteredMails = computed(() => {
-  if (selectedTab.value === 1) {
-    return mails.value.filter(mail => !!mail.unread)
-  }
-
-  return mails.value
-})
-
-const selectedMail = ref<Mail | null>()
-
-const isMailPanelOpen = computed({
-  get() {
-    return !!selectedMail.value
-  },
-  set(value: boolean) {
-    if (!value) {
-      selectedMail.value = null
-    }
-  }
-})
-
-// Reset selected mail if it's not in the filtered mails
-watch(filteredMails, () => {
-  if (!filteredMails.value.find(mail => mail.id === selectedMail.value?.id)) {
-    selectedMail.value = null
-  }
-})
-</script>
-
-<template>
-  <UDashboardPage>
-    <UDashboardPanel
-      id="inbox"
-      :width="400"
-      :resizable="{ min: 300, max: 500 }"
-    >
-      <UDashboardNavbar
-        title="Inbox"
-        :badge="filteredMails.length"
-      >
-        <template #right>
-          <UTabs
-            v-model="selectedTab"
-            :items="tabItems"
-            :ui="{ wrapper: '', list: { height: 'h-9', tab: { height: 'h-7', size: 'text-[13px]' } } }"
-          />
-        </template>
-      </UDashboardNavbar>
-
-      <!-- ~/components/inbox/InboxList.vue -->
-      <InboxList
-        v-model="selectedMail"
-        :mails="filteredMails"
-      />
-    </UDashboardPanel>
-
-    <UDashboardPanel
-      v-model="isMailPanelOpen"
-      collapsible
-      grow
-      side="right"
-    >
-      <template v-if="selectedMail">
-        <UDashboardNavbar>
-          <template #toggle>
-            <UDashboardNavbarToggle icon="i-heroicons-x-mark" />
-
-            <UDivider
-              orientation="vertical"
-              class="mx-1.5 lg:hidden"
-            />
-          </template>
-
-          <template #left>
-            <UTooltip text="Archive">
-              <UButton
-                icon="i-heroicons-archive-box"
-                color="gray"
-                variant="ghost"
-              />
-            </UTooltip>
-
-            <UTooltip text="Move to junk">
-              <UButton
-                icon="i-heroicons-archive-box-x-mark"
-                color="gray"
-                variant="ghost"
-              />
-            </UTooltip>
-
-            <UDivider
-              orientation="vertical"
-              class="mx-1.5"
-            />
-
-            <UPopover :popper="{ placement: 'bottom-start' }">
-              <template #default="{ open }">
-                <UTooltip
-                  text="Snooze"
-                  :prevent="open"
-                >
-                  <UButton
-                    icon="i-heroicons-clock"
-                    color="gray"
-                    variant="ghost"
-                    :class="[open && 'bg-gray-50 dark:bg-gray-800']"
-                  />
-                </UTooltip>
-              </template>
-
-              <template #panel="{ close }">
-                <DatePicker @close="close" />
-              </template>
-            </UPopover>
-          </template>
-
-          <template #right>
-            <UTooltip text="Reply">
-              <UButton
-                icon="i-heroicons-arrow-uturn-left"
-                color="gray"
-                variant="ghost"
-              />
-            </UTooltip>
-
-            <UTooltip text="Forward">
-              <UButton
-                icon="i-heroicons-arrow-uturn-right"
-                color="gray"
-                variant="ghost"
-              />
-            </UTooltip>
-
-            <UDivider
-              orientation="vertical"
-              class="mx-1.5"
-            />
-
-            <UDropdown :items="dropdownItems">
-              <UButton
-                icon="i-heroicons-ellipsis-vertical"
-                color="gray"
-                variant="ghost"
-              />
-            </UDropdown>
-          </template>
-        </UDashboardNavbar>
-
-        <!-- ~/components/inbox/InboxMail.vue -->
-        <InboxMail :mail="selectedMail" />
-      </template>
-      <div
-        v-else
-        class="flex-1 hidden lg:flex items-center justify-center"
-      >
-        <UIcon
-          name="i-heroicons-inbox"
-          class="w-32 h-32 text-gray-400 dark:text-gray-500"
-        />
-      </div>
-    </UDashboardPanel>
-  </UDashboardPage>
-</template>
diff --git a/app/_pages/index.vue b/app/_pages/index.vue
deleted file mode 100644
index daedef2..0000000
--- a/app/_pages/index.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { sub } from 'date-fns'
-import type { Period, Range } from '~/types'
-
-const { isNotificationsSlideoverOpen } = useDashboard()
-
-const items = [[{
-  label: 'New mail',
-  icon: 'i-heroicons-paper-airplane',
-  to: '/inbox'
-}, {
-  label: 'New user',
-  icon: 'i-heroicons-user-plus',
-  to: '/users'
-}]]
-
-const range = ref<Range>({ start: sub(new Date(), { days: 14 }), end: new Date() })
-const period = ref<Period>('daily')
-</script>
-
-<template>
-  <UDashboardPage>
-    <UDashboardPanel grow>
-      <UDashboardNavbar title="Home">
-        <template #right>
-          <UTooltip
-            text="Notifications"
-            :shortcuts="['N']"
-          >
-            <UButton
-              color="gray"
-              variant="ghost"
-              square
-              @click="isNotificationsSlideoverOpen = true"
-            >
-              <UChip
-                color="red"
-                inset
-              >
-                <UIcon
-                  name="i-heroicons-bell"
-                  class="w-5 h-5"
-                />
-              </UChip>
-            </UButton>
-          </UTooltip>
-
-          <UDropdown :items="items">
-            <UButton
-              icon="i-heroicons-plus"
-              size="md"
-              class="ml-1.5 rounded-full"
-            />
-          </UDropdown>
-        </template>
-      </UDashboardNavbar>
-
-      <UDashboardToolbar>
-        <template #left>
-          <!-- ~/components/home/HomeDateRangePicker.vue -->
-          <HomeDateRangePicker
-            v-model="range"
-            class="-ml-2.5"
-          />
-
-          <!-- ~/components/home/HomePeriodSelect.vue -->
-          <HomePeriodSelect
-            v-model="period"
-            :range="range"
-          />
-        </template>
-      </UDashboardToolbar>
-
-      <UDashboardPanelContent>
-        <!-- ~/components/home/HomeChart.vue -->
-        <HomeChart
-          :period="period"
-          :range="range"
-        />
-
-        <div class="grid lg:grid-cols-2 lg:items-start gap-8 mt-8">
-          <!-- ~/components/home/HomeSales.vue -->
-          <HomeSales />
-          <!-- ~/components/home/HomeCountries.vue -->
-          <HomeCountries />
-        </div>
-      </UDashboardPanelContent>
-    </UDashboardPanel>
-  </UDashboardPage>
-</template>
diff --git a/app/_pages/users.vue b/app/_pages/users.vue
deleted file mode 100644
index db0753a..0000000
--- a/app/_pages/users.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<script setup lang="ts">
-import type { User } from '~/types'
-
-const defaultColumns = [{
-  key: 'id',
-  label: '#'
-}, {
-  key: 'name',
-  label: 'Name',
-  sortable: true
-}, {
-  key: 'email',
-  label: 'Email',
-  sortable: true
-}, {
-  key: 'location',
-  label: 'Location'
-}, {
-  key: 'status',
-  label: 'Status'
-}]
-
-const q = ref('')
-const selected = ref<User[]>([])
-const selectedColumns = ref(defaultColumns)
-const selectedStatuses = ref([])
-const selectedLocations = ref([])
-const sort = ref({ column: 'id', direction: 'asc' as const })
-const input = ref<{ input: HTMLInputElement }>()
-const isNewUserModalOpen = ref(false)
-
-const columns = computed(() => defaultColumns.filter(column => selectedColumns.value.includes(column)))
-
-const query = computed(() => ({ q: q.value, statuses: selectedStatuses.value, locations: selectedLocations.value, sort: sort.value.column, order: sort.value.direction }))
-
-const { data: users, pending } = await useFetch<User[]>('/api/users', { query, default: () => [] })
-
-const defaultLocations = users.value.reduce((acc, user) => {
-  if (!acc.includes(user.location)) {
-    acc.push(user.location)
-  }
-  return acc
-}, [] as string[])
-
-const defaultStatuses = users.value.reduce((acc, user) => {
-  if (!acc.includes(user.status)) {
-    acc.push(user.status)
-  }
-  return acc
-}, [] as string[])
-
-function onSelect(row: User) {
-  const index = selected.value.findIndex(item => item.id === row.id)
-  if (index === -1) {
-    selected.value.push(row)
-  } else {
-    selected.value.splice(index, 1)
-  }
-}
-
-defineShortcuts({
-  '/': () => {
-    input.value?.input?.focus()
-  }
-})
-</script>
-
-<template>
-  <UDashboardPage>
-    <UDashboardPanel grow>
-      <UDashboardNavbar
-        title="Users"
-        :badge="users.length"
-      >
-        <template #right>
-          <UInput
-            ref="input"
-            v-model="q"
-            icon="i-heroicons-funnel"
-            autocomplete="off"
-            placeholder="Filter users..."
-            class="hidden lg:block"
-            @keydown.esc="$event.target.blur()"
-          >
-            <template #trailing>
-              <UKbd value="/" />
-            </template>
-          </UInput>
-
-          <UButton
-            label="New user"
-            trailing-icon="i-heroicons-plus"
-            color="gray"
-            @click="isNewUserModalOpen = true"
-          />
-        </template>
-      </UDashboardNavbar>
-
-      <UDashboardToolbar>
-        <template #left>
-          <USelectMenu
-            v-model="selectedStatuses"
-            icon="i-heroicons-check-circle"
-            placeholder="Status"
-            multiple
-            :options="defaultStatuses"
-            :ui-menu="{ option: { base: 'capitalize' } }"
-          />
-          <USelectMenu
-            v-model="selectedLocations"
-            icon="i-heroicons-map-pin"
-            placeholder="Location"
-            :options="defaultLocations"
-            multiple
-          />
-        </template>
-
-        <template #right>
-          <USelectMenu
-            v-model="selectedColumns"
-            icon="i-heroicons-adjustments-horizontal-solid"
-            :options="defaultColumns"
-            multiple
-            class="hidden lg:block"
-          >
-            <template #label>
-              Display
-            </template>
-          </USelectMenu>
-        </template>
-      </UDashboardToolbar>
-
-      <UDashboardModal
-        v-model="isNewUserModalOpen"
-        title="New user"
-        description="Add a new user to your database"
-        :ui="{ width: 'sm:max-w-md' }"
-      >
-        <!-- ~/components/users/UsersForm.vue -->
-        <UsersForm @close="isNewUserModalOpen = false" />
-      </UDashboardModal>
-
-      <UTable
-        v-model="selected"
-        v-model:sort="sort"
-        :rows="users"
-        :columns="columns"
-        :loading="pending"
-        sort-mode="manual"
-        class="w-full"
-        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-        @select="onSelect"
-      >
-        <template #name-data="{ row }">
-          <div class="flex items-center gap-3">
-            <UAvatar
-              v-bind="row.avatar"
-              :alt="row.name"
-              size="xs"
-            />
-
-            <span class="text-gray-900 dark:text-white font-medium">{{ row.name }}</span>
-          </div>
-        </template>
-
-        <template #status-data="{ row }">
-          <UBadge
-            :label="row.status"
-            :color="row.status === 'subscribed' ? 'green' : row.status === 'bounced' ? 'orange' : 'red'"
-            variant="subtle"
-            class="capitalize"
-          />
-        </template>
-      </UTable>
-    </UDashboardPanel>
-  </UDashboardPage>
-</template>
diff --git a/app/components/customers/AddModal.vue b/app/components/customers/AddModal.vue
new file mode 100644
index 0000000..fa6c942
--- /dev/null
+++ b/app/components/customers/AddModal.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const schema = z.object({
+  name: z.string().min(2, 'Too short'),
+  email: z.string().email('Invalid email')
+})
+const open = ref(false)
+
+type Schema = z.output<typeof schema>
+
+const state = reactive<Partial<Schema>>({
+  name: undefined,
+  email: undefined
+})
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  toast.add({ title: 'Success', description: `New customer ${event.data.name} added`, color: 'success' })
+  open.value = false
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="New customer" description="Add a new customer to the database">
+    <UButton label="New customer" icon="i-lucide-plus" />
+
+    <template #body>
+      <UForm
+        :schema="schema"
+        :state="state"
+        class="space-y-4"
+        @submit="onSubmit"
+      >
+        <UFormField label="Name" placeholder="John Doe" name="name">
+          <UInput v-model="state.name" class="w-full" />
+        </UFormField>
+        <UFormField label="Email" placeholder="john.doe@example.com" name="email">
+          <UInput v-model="state.email" class="w-full" />
+        </UFormField>
+        <div class="flex justify-end gap-2">
+          <UButton
+            label="Cancel"
+            color="neutral"
+            variant="subtle"
+            @click="open = false"
+          />
+          <UButton
+            label="Create"
+            color="primary"
+            variant="solid"
+            type="submit"
+          />
+        </div>
+      </UForm>
+    </template>
+  </UModal>
+</template>
diff --git a/app/components/customers/DeleteModal.vue b/app/components/customers/DeleteModal.vue
new file mode 100644
index 0000000..daea54a
--- /dev/null
+++ b/app/components/customers/DeleteModal.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{
+  nbCustomers: number
+}>()
+
+const open = ref(false)
+
+async function onSubmit() {
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  open.value = false
+}
+</script>
+
+<template>
+  <UModal
+    v-model:open="open"
+    :title="`Delete ${nbCustomers} customer${nbCustomers > 1 ? 's' : ''}`"
+    :description="`Are you sure, this action cannot be undone.`"
+  >
+    <slot />
+
+    <template #body>
+      <div class="flex justify-end gap-2">
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="subtle"
+          @click="open = false"
+        />
+        <UButton
+          label="Delete"
+          color="error"
+          variant="solid"
+          loading-auto
+          @click="onSubmit"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/app/pages/customers.vue b/app/pages/customers.vue
index 1ef01dd..e64d21b 100644
--- a/app/pages/customers.vue
+++ b/app/pages/customers.vue
@@ -1,3 +1,200 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+import { upperFirst } from 'scule'
+import { getPaginationRowModel, type Row } from '@tanstack/table-core'
+import type { User } from '~/types'
+
+const UAvatar = resolveComponent('UAvatar')
+const UButton = resolveComponent('UButton')
+const UBadge = resolveComponent('UBadge')
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+const UCheckbox = resolveComponent('UCheckbox')
+
+const toast = useToast()
+const table = useTemplateRef('table')
+
+const columnFilters = ref([{
+  id: 'email',
+  value: ''
+}])
+const columnVisibility = ref()
+const rowSelection = ref({ 1: true })
+
+const { data, status } = await useFetch<User[]>('/api/customers', {
+  lazy: true
+})
+
+function getRowItems(row: Row<User>) {
+  return [
+    {
+      type: 'label',
+      label: 'Actions'
+    },
+    {
+      label: 'Copy customer ID',
+      icon: 'i-lucide-copy',
+      onSelect() {
+        navigator.clipboard.writeText(row.original.id.toString())
+        toast.add({
+          title: 'Copied to clipboard',
+          description: 'Customer ID copied to clipboard'
+        })
+      }
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'View customer details',
+      icon: 'i-lucide-list'
+    },
+    {
+      label: 'View customer payments',
+      icon: 'i-lucide-wallet'
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: 'Delete customer',
+      icon: 'i-lucide-trash',
+      color: 'error',
+      onSelect() {
+        toast.add({
+          title: 'Customer deleted',
+          description: 'The customer has been deleted.'
+        })
+      }
+    }
+  ]
+}
+
+const columns: TableColumn<User>[] = [
+  {
+    id: 'select',
+    header: ({ table }) =>
+      h(UCheckbox, {
+        'modelValue': table.getIsSomePageRowsSelected()
+          ? 'indeterminate'
+          : table.getIsAllPageRowsSelected(),
+        'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
+          table.toggleAllPageRowsSelected(!!value),
+        'ariaLabel': 'Select all'
+      }),
+    cell: ({ row }) =>
+      h(UCheckbox, {
+        'modelValue': row.getIsSelected(),
+        'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
+        'ariaLabel': 'Select row'
+      })
+  },
+  {
+    accessorKey: 'id',
+    header: 'ID'
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    cell: ({ row }) => {
+      return h('div', { class: 'flex items-center gap-3' }, [
+        h(UAvatar, {
+          ...row.original.avatar,
+          size: 'lg'
+        }),
+        h('div', undefined, [
+          h('p', { class: 'font-medium text-(--ui-text-highlighted)' }, row.original.name),
+          h('p', { class: '' }, `@${row.original.name}`)
+        ])
+      ])
+    }
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => {
+      const isSorted = column.getIsSorted()
+
+      return h(UButton, {
+        color: 'neutral',
+        variant: 'ghost',
+        label: 'Email',
+        icon: isSorted
+          ? isSorted === 'asc'
+            ? 'i-lucide-arrow-up-narrow-wide'
+            : 'i-lucide-arrow-down-wide-narrow'
+          : 'i-lucide-arrow-up-down',
+        class: '-mx-2.5',
+        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
+      })
+    }
+  },
+  {
+    accessorKey: 'location',
+    header: 'Location',
+    cell: ({ row }) => row.original.location
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    filterFn: 'equals',
+    cell: ({ row }) => {
+      const color = {
+        subscribed: 'success' as const,
+        unsubscribed: 'error' as const,
+        bounced: 'warning' as const
+      }[row.original.status]
+
+      return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () =>
+        row.original.status
+      )
+    }
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      return h(
+        'div',
+        { class: 'text-right' },
+        h(
+          UDropdownMenu,
+          {
+            content: {
+              align: 'end'
+            },
+            items: getRowItems(row)
+          },
+          () =>
+            h(UButton, {
+              icon: 'i-lucide-ellipsis-vertical',
+              color: 'neutral',
+              variant: 'ghost',
+              class: 'ml-auto'
+            })
+        )
+      )
+    }
+  }
+]
+
+const statusFilter = ref('all')
+
+watch(() => statusFilter.value, (newVal) => {
+  if (!table?.value.tableApi) return
+  const statusColumn = table.value.tableApi.getColumn('status')
+  if (!statusColumn) return
+
+  if (newVal === 'all') {
+    statusColumn.setFilterValue(undefined)
+  } else {
+    statusColumn.setFilterValue(newVal)
+  }
+})
+
+const pagination = ref({
+  pageIndex: 0,
+  pageSize: 10
+})
+</script>
+
 <template>
   <UDashboardPanel id="customers">
     <template #header>
@@ -5,7 +202,118 @@
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
+
+        <template #right>
+          <CustomersAddModal />
+        </template>
       </UDashboardNavbar>
     </template>
+
+    <template #body>
+      <div class="flex flex-wrap items-center justify-between gap-1.5">
+        <UInput
+          :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
+          class="max-w-sm"
+          icon="i-lucide-search"
+          placeholder="Filter emails..."
+          @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
+        />
+
+        <div class="flex flex-wrap items-center gap-1.5">
+          <CustomersDeleteModal :nb-customers="table?.tableApi?.getFilteredSelectedRowModel().rows.length">
+            <UButton
+              v-if="table?.tableApi?.getFilteredSelectedRowModel().rows.length"
+              label="Delete"
+              color="error"
+              variant="subtle"
+              icon="i-lucide-trash"
+            >
+              <template #trailing>
+                <UKbd>
+                  {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length }}
+                </UKbd>
+              </template>
+            </UButton>
+          </CustomersDeleteModal>
+
+          <USelect
+            v-model="statusFilter"
+            :items="[
+              { label: 'All', value: 'all' },
+              { label: 'Subscribed', value: 'subscribed' },
+              { label: 'Unsubscribed', value: 'unsubscribed' },
+              { label: 'Bounced', value: 'bounced' }
+            ]"
+            :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+            placeholder="Filter status"
+            class="min-w-28"
+          />
+          <UDropdownMenu
+            :items="
+              table?.tableApi
+                ?.getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => ({
+                  label: upperFirst(column.id),
+                  type: 'checkbox' as const,
+                  checked: column.getIsVisible(),
+                  onUpdateChecked(checked: boolean) {
+                    table?.tableApi?.getColumn(column.id)?.toggleVisibility(!!checked)
+                  },
+                  onSelect(e?: Event) {
+                    e?.preventDefault()
+                  }
+                }))
+            "
+            :content="{ align: 'end' }"
+          >
+            <UButton
+              label="Display"
+              color="neutral"
+              variant="outline"
+              trailing-icon="i-lucide-settings-2"
+            />
+          </UDropdownMenu>
+        </div>
+      </div>
+
+      <UTable
+        ref="table"
+        v-model:column-filters="columnFilters"
+        v-model:column-visibility="columnVisibility"
+        v-model:row-selection="rowSelection"
+        v-model:pagination="pagination"
+        :pagination-options="{
+          getPaginationRowModel: getPaginationRowModel()
+        }"
+        class="shrink-0"
+        :data="data"
+        :columns="columns"
+        :loading="status === 'pending'"
+        :ui="{
+          base: 'table-fixed border-separate border-spacing-0',
+          thead: '[&>tr]:bg-(--ui-bg-elevated)/50 [&>tr]:after:content-none',
+          tbody: '[&>tr]:last:[&>td]:border-b-0',
+          th: 'py-1 first:rounded-l-[calc(var(--ui-radius)*2)] last:rounded-r-[calc(var(--ui-radius)*2)] border-y border-(--ui-border) first:border-l last:border-r',
+          td: 'border-b border-(--ui-border)'
+        }"
+      />
+
+      <div class="flex items-center justify-between gap-3 border-t border-(--ui-border) pt-4 mt-auto">
+        <div class="text-sm text-(--ui-text-muted)">
+          {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length || 0 }} of
+          {{ table?.tableApi?.getFilteredRowModel().rows.length || 0 }} row(s) selected.
+        </div>
+
+        <div class="flex items-center gap-1.5">
+          <UPagination
+            :default-page="(table?.tableApi?.getState().pagination.pageIndex || 0) + 1"
+            :items-per-page="table?.tableApi?.getState().pagination.pageSize"
+            :total="table?.tableApi?.getFilteredRowModel().rows.length"
+            @update:page="(p) => table?.tableApi?.setPageIndex(p - 1)"
+          />
+        </div>
+      </div>
+    </template>
   </UDashboardPanel>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index b4db713..e3010ba 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -51,7 +51,7 @@ const period = ref<Period>('daily')
 
       <UDashboardToolbar>
         <template #left>
-          <!-- NOTE: The `-ms-1` class is used to align with the `DashboardSidebarCollpase` button here. -->
+          <!-- NOTE: The `-ms-1` class is used to align with the `DashboardSidebarCollapse` button here. -->
           <HomeDateRangePicker v-model="range" class="-ms-1" />
 
           <HomePeriodSelect v-model="period" :range="range" />
diff --git a/package.json b/package.json
index 4a7af58..3c9478b 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,13 @@
   "dependencies": {
     "@iconify-json/lucide": "^1.2.26",
     "@iconify-json/simple-icons": "^1.2.24",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@429d8fd",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@17d88f7",
     "@unovis/ts": "^1.5.0",
     "@unovis/vue": "^1.5.0",
     "@vueuse/nuxt": "^12.7.0",
     "date-fns": "^4.1.0",
-    "nuxt": "^3.15.4"
+    "nuxt": "^3.15.4",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 21218a5..1e2eadf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ importers:
         specifier: ^1.2.24
         version: 1.2.24
       '@nuxt/ui-pro':
-        specifier: https://pkg.pr.new/@nuxt/ui-pro@429d8fd
-        version: https://pkg.pr.new/@nuxt/ui-pro@429d8fd(@babel/parser@7.26.9)(change-case@5.4.4)(db0@0.2.4)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.14(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+        specifier: https://pkg.pr.new/@nuxt/ui-pro@17d88f7
+        version: https://pkg.pr.new/@nuxt/ui-pro@17d88f7(@babel/parser@7.26.9)(change-case@5.4.4)(db0@0.2.4)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.14(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@unovis/ts':
         specifier: ^1.5.0
         version: 1.5.0
@@ -32,6 +32,9 @@ importers:
       nuxt:
         specifier: ^3.15.4
         version: 3.15.4(@parcel/watcher@2.5.1)(@types/node@22.13.4)(db0@0.2.4)(eslint@9.20.1(jiti@2.4.2))(ioredis@5.5.0)(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.34.8)(terser@5.39.0)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.2.2(typescript@5.7.3))(yaml@2.7.0)
+      zod:
+        specifier: ^3.24.2
+        version: 3.24.2
     devDependencies:
       '@nuxt/eslint':
         specifier: ^1.0.1
@@ -709,14 +712,14 @@ packages:
     engines: {node: '>=18.12.0'}
     hasBin: true
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@429d8fd':
-    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@429d8fd}
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@17d88f7':
+    resolution: {tarball: https://pkg.pr.new/@nuxt/ui-pro@17d88f7}
     version: 3.0.0-alpha.13
     peerDependencies:
       typescript: ^5.6.3
 
-  '@nuxt/ui@https://pkg.pr.new/@nuxt/ui@d33a83e':
-    resolution: {tarball: https://pkg.pr.new/@nuxt/ui@d33a83e}
+  '@nuxt/ui@https://pkg.pr.new/@nuxt/ui@ca659bd':
+    resolution: {tarball: https://pkg.pr.new/@nuxt/ui@ca659bd}
     version: 3.0.0-alpha.13
     hasBin: true
     peerDependencies:
@@ -4806,6 +4809,9 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
+  zod@3.24.2:
+    resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -5742,11 +5748,11 @@ snapshots:
       - magicast
       - supports-color
 
-  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@429d8fd(@babel/parser@7.26.9)(change-case@5.4.4)(db0@0.2.4)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.14(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/ui-pro@https://pkg.pr.new/@nuxt/ui-pro@17d88f7(@babel/parser@7.26.9)(change-case@5.4.4)(db0@0.2.4)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.14(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@nuxt/kit': 3.15.4(magicast@0.3.5)
       '@nuxt/schema': 3.15.4
-      '@nuxt/ui': https://pkg.pr.new/@nuxt/ui@d33a83e(@babel/parser@7.26.9)(change-case@5.4.4)(db0@0.2.4)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.14(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+      '@nuxt/ui': https://pkg.pr.new/@nuxt/ui@ca659bd(@babel/parser@7.26.9)(change-case@5.4.4)(db0@0.2.4)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.14(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vueuse/core': 12.7.0(typescript@5.7.3)
       consola: 3.4.0
       defu: 6.1.4
@@ -5796,7 +5802,7 @@ snapshots:
       - vite
       - vue
 
-  '@nuxt/ui@https://pkg.pr.new/@nuxt/ui@d33a83e(@babel/parser@7.26.9)(change-case@5.4.4)(db0@0.2.4)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.14(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
+  '@nuxt/ui@https://pkg.pr.new/@nuxt/ui@ca659bd(@babel/parser@7.26.9)(change-case@5.4.4)(db0@0.2.4)(embla-carousel@8.5.2)(ioredis@5.5.0)(magicast@0.3.5)(radix-vue@1.9.14(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.4)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))':
     dependencies:
       '@iconify/vue': 4.3.0(vue@3.5.13(typescript@5.7.3))
       '@internationalized/date': 3.7.0
@@ -10377,3 +10383,5 @@ snapshots:
       archiver-utils: 5.0.2
       compress-commons: 6.0.2
       readable-stream: 4.7.0
+
+  zod@3.24.2: {}
diff --git a/server/api/users.ts b/server/api/customers.ts
similarity index 80%
rename from server/api/users.ts
rename to server/api/customers.ts
index 90c0a24..16c24c8 100644
--- a/server/api/users.ts
+++ b/server/api/customers.ts
@@ -1,6 +1,6 @@
-import type { User, UserStatus } from '~/types'
+import type { User } from '~/types'
 
-const users: User[] = [{
+const customers: User[] = [{
   id: 1,
   name: 'Alex Smith',
   email: 'alex.smith@example.com',
@@ -182,29 +182,6 @@ const users: User[] = [{
   location: 'London, UK'
 }]
 
-export default eventHandler(async (event) => {
-  const { q, statuses, locations, sort, order } = getQuery(event) as { q?: string, statuses?: UserStatus[], locations?: string[], sort?: 'name' | 'email', order?: 'asc' | 'desc' }
-
-  return users.filter((user) => {
-    if (!q) return true
-
-    return user.name.search(new RegExp(q, 'i')) !== -1 || user.email.search(new RegExp(q, 'i')) !== -1
-  }).filter((user) => {
-    if (!statuses?.length) return true
-
-    return statuses.includes(user.status)
-  }).filter((user) => {
-    if (!locations?.length) return true
-
-    return locations.includes(user.location)
-  }).sort((a, b) => {
-    if (!sort) return 0
-
-    const aValue = a[sort]
-    const bValue = b[sort]
-
-    if (aValue < bValue) return order === 'asc' ? -1 : 1
-    if (aValue > bValue) return order === 'asc' ? 1 : -1
-    return 0
-  })
+export default eventHandler(async () => {
+  return customers
 })