From 570bc4b6dce87d40fa2e625ed600e8bb86588de0 Mon Sep 17 00:00:00 2001
From: matusilva <viniciusmatheus.dev@gmail.com>
Date: Tue, 6 Jan 2026 17:54:44 -0300
Subject: [PATCH] feat: update user management and settings structure

- Change user navigation from "/users" to "/settings/users"
- Remove MembersList component and related members page
- Add AddModal and DeleteModal for user management
- Implement List component for displaying users with actions
- Update useAuth composable to improve user loading and management
- Refactor dashboard shortcuts for better navigation
- Enhance settings layout with new links for users and ads
- Create anuncios page and update index page for user creation
- Improve login page with error handling and navigation
- Refactor settings page to include new user and ad management links
- Remove unused members API endpoint and related types
- Update ESLint configuration for better code style enforcement
- Adjust Nuxt configuration for cleaner module imports
---
 app/components/TeamsMenu.vue                  |  74 ++--
 app/components/UserMenu.vue                   | 273 +++++++-------
 app/components/home/HomeChart.client.vue      | 103 +++---
 app/components/home/HomeStats.vue             |   2 +-
 app/components/settings/MembersList.vue       |  60 ----
 .../{ => settings}/users/AddModal.vue         |   0
 .../{ => settings}/users/DeleteModal.vue      |  19 +-
 app/components/settings/users/List.vue        |  72 ++++
 app/composables/useAuth.ts                    |  34 +-
 app/composables/useDashboard.ts               |   3 +-
 app/layouts/default.vue                       | 160 +++++----
 app/pages/anuncios.vue                        |   4 +
 app/pages/index.vue                           |   2 +-
 app/pages/login.vue                           |  15 +-
 app/pages/settings.vue                        |  58 +--
 app/pages/settings/index.vue                  |  78 ++--
 app/pages/settings/members.vue                |  45 ---
 app/pages/settings/users.vue                  |  67 ++++
 app/pages/users.vue                           | 336 ------------------
 app/types/index.d.ts                          |   9 +-
 eslint.config.mjs                             |   3 +-
 nuxt.config.ts                                |   9 +-
 server/api/members.ts                         |  60 ----
 23 files changed, 591 insertions(+), 895 deletions(-)
 delete mode 100644 app/components/settings/MembersList.vue
 rename app/components/{ => settings}/users/AddModal.vue (100%)
 rename app/components/{ => settings}/users/DeleteModal.vue (67%)
 create mode 100644 app/components/settings/users/List.vue
 delete mode 100644 app/pages/settings/members.vue
 create mode 100644 app/pages/settings/users.vue
 delete mode 100644 app/pages/users.vue
 delete mode 100644 server/api/members.ts

diff --git a/app/components/TeamsMenu.vue b/app/components/TeamsMenu.vue
index 072ac66..cb0ec9b 100644
--- a/app/components/TeamsMenu.vue
+++ b/app/components/TeamsMenu.vue
@@ -5,40 +5,50 @@ defineProps<{
   collapsed?: boolean
 }>()
 
-const teams = ref([{
-  label: 'Nuxt',
-  avatar: {
-    src: 'https://github.com/nuxt.png',
-    alt: 'Nuxt'
-  }
-}, {
-  label: 'NuxtHub',
-  avatar: {
-    src: 'https://github.com/nuxt-hub.png',
-    alt: 'NuxtHub'
-  }
-}, {
-  label: 'NuxtLabs',
-  avatar: {
-    src: 'https://github.com/nuxtlabs.png',
-    alt: 'NuxtLabs'
+const teams = ref([
+  {
+    label: 'Nuxt',
+    avatar: {
+      src: 'https://github.com/nuxt.png',
+      alt: 'Nuxt'
+    }
+  },
+  {
+    label: 'NuxtHub',
+    avatar: {
+      src: 'https://github.com/nuxt-hub.png',
+      alt: 'NuxtHub'
+    }
+  },
+  {
+    label: 'NuxtLabs',
+    avatar: {
+      src: 'https://github.com/nuxtlabs.png',
+      alt: 'NuxtLabs'
+    }
   }
-}])
+])
 const selectedTeam = ref(teams.value[0])
 
 const items = computed<DropdownMenuItem[][]>(() => {
-  return [teams.value.map(team => ({
-    ...team,
-    onSelect() {
-      selectedTeam.value = team
-    }
-  })), [{
-    label: 'Create team',
-    icon: 'i-lucide-circle-plus'
-  }, {
-    label: 'Manage teams',
-    icon: 'i-lucide-cog'
-  }]]
+  return [
+    teams.value.map((team) => ({
+      ...team,
+      onSelect() {
+        selectedTeam.value = team
+      }
+    })),
+    [
+      {
+        label: 'Create team',
+        icon: 'i-lucide-circle-plus'
+      },
+      {
+        label: 'Manage teams',
+        icon: 'i-lucide-cog'
+      }
+    ]
+  ]
 })
 </script>
 
@@ -46,7 +56,9 @@ const items = computed<DropdownMenuItem[][]>(() => {
   <UDropdownMenu
     :items="items"
     :content="{ align: 'center', collisionPadding: 12 }"
-    :ui="{ content: collapsed ? 'w-40' : 'w-(--reka-dropdown-menu-trigger-width)' }"
+    :ui="{
+      content: collapsed ? 'w-40' : 'w-(--reka-dropdown-menu-trigger-width)'
+    }"
   >
     <UButton
       v-bind="{
diff --git a/app/components/UserMenu.vue b/app/components/UserMenu.vue
index 66b3abd..f2c0785 100644
--- a/app/components/UserMenu.vue
+++ b/app/components/UserMenu.vue
@@ -8,159 +8,166 @@ defineProps<{
 const colorMode = useColorMode()
 const appConfig = useAppConfig()
 
-const colors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+const colors = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose'
+]
 const neutrals = ['slate', 'gray', 'zinc', 'neutral', 'stone']
 
-const user = ref({
-  name: 'Benjamin Canac',
-  avatar: {
-    src: 'https://github.com/benjamincanac.png',
-    alt: 'Benjamin Canac'
-  }
-})
+const { loadAuthUser, user } = useAuth()
+await loadAuthUser()
 
-const items = computed<DropdownMenuItem[][]>(() => ([[{
-  type: 'label',
-  label: user.value.name,
-  avatar: user.value.avatar
-}], [{
-  label: 'Profile',
-  icon: 'i-lucide-user'
-}, {
-  label: 'Billing',
-  icon: 'i-lucide-credit-card'
-}, {
-  label: 'Settings',
-  icon: 'i-lucide-settings',
-  to: '/settings'
-}], [{
-  label: 'Theme',
-  icon: 'i-lucide-palette',
-  children: [{
-    label: 'Primary',
-    slot: 'chip',
-    chip: appConfig.ui.colors.primary,
-    content: {
-      align: 'center',
-      collisionPadding: 16
-    },
-    children: colors.map(color => ({
-      label: color,
-      chip: color,
-      slot: 'chip',
-      checked: appConfig.ui.colors.primary === color,
-      type: 'checkbox',
-      onSelect: (e) => {
-        e.preventDefault()
+// const user = ref({
+//   name: 'Benjamin Canac',
+//   avatar: {
+//     src: 'https://github.com/benjamincanac.png',
+//     alt: 'Benjamin Canac'
+//   }
+// })
 
-        appConfig.ui.colors.primary = color
-      }
-    }))
-  }, {
-    label: 'Neutral',
-    slot: 'chip',
-    chip: appConfig.ui.colors.neutral === 'neutral' ? 'old-neutral' : appConfig.ui.colors.neutral,
-    content: {
-      align: 'end',
-      collisionPadding: 16
+const items = computed<DropdownMenuItem[][]>(() => [
+  [
+    {
+      type: 'label',
+      label: user.value.email,
+      avatar: user.value.avatar
+    }
+  ],
+  [
+    {
+      label: 'Perfil',
+      icon: 'i-lucide-user'
     },
-    children: neutrals.map(color => ({
-      label: color,
-      chip: color === 'neutral' ? 'old-neutral' : color,
-      slot: 'chip',
-      type: 'checkbox',
-      checked: appConfig.ui.colors.neutral === color,
-      onSelect: (e) => {
-        e.preventDefault()
+    {
+      label: 'Ajustes',
+      icon: 'i-lucide-settings',
+      to: '/settings'
+    }
+  ],
+  [
+    {
+      label: 'Tema',
+      icon: 'i-lucide-palette',
+      children: [
+        {
+          label: 'Primary',
+          slot: 'chip',
+          chip: appConfig.ui.colors.primary,
+          content: {
+            align: 'center',
+            collisionPadding: 16
+          },
+          children: colors.map((color) => ({
+            label: color,
+            chip: color,
+            slot: 'chip',
+            checked: appConfig.ui.colors.primary === color,
+            type: 'checkbox',
+            onSelect: (e) => {
+              e.preventDefault()
 
-        appConfig.ui.colors.neutral = color
-      }
-    }))
-  }]
-}, {
-  label: 'Appearance',
-  icon: 'i-lucide-sun-moon',
-  children: [{
-    label: 'Light',
-    icon: 'i-lucide-sun',
-    type: 'checkbox',
-    checked: colorMode.value === 'light',
-    onSelect(e: Event) {
-      e.preventDefault()
+              appConfig.ui.colors.primary = color
+            }
+          }))
+        },
+        {
+          label: 'Neutral',
+          slot: 'chip',
+          chip:
+            appConfig.ui.colors.neutral === 'neutral'
+              ? 'old-neutral'
+              : appConfig.ui.colors.neutral,
+          content: {
+            align: 'end',
+            collisionPadding: 16
+          },
+          children: neutrals.map((color) => ({
+            label: color,
+            chip: color === 'neutral' ? 'old-neutral' : color,
+            slot: 'chip',
+            type: 'checkbox',
+            checked: appConfig.ui.colors.neutral === color,
+            onSelect: (e) => {
+              e.preventDefault()
+
+              appConfig.ui.colors.neutral = color
+            }
+          }))
+        }
+      ]
+    },
+    {
+      label: 'Aparência',
+      icon: 'i-lucide-sun-moon',
+      children: [
+        {
+          label: 'Clara',
+          icon: 'i-lucide-sun',
+          type: 'checkbox',
+          checked: colorMode.value === 'light',
+          onSelect(e: Event) {
+            e.preventDefault()
 
-      colorMode.preference = 'light'
+            colorMode.preference = 'light'
+          }
+        },
+        {
+          label: 'Escura',
+          icon: 'i-lucide-moon',
+          type: 'checkbox',
+          checked: colorMode.value === 'dark',
+          onUpdateChecked(checked: boolean) {
+            if (checked) {
+              colorMode.preference = 'dark'
+            }
+          },
+          onSelect(e: Event) {
+            e.preventDefault()
+          }
+        }
+      ]
     }
-  }, {
-    label: 'Dark',
-    icon: 'i-lucide-moon',
-    type: 'checkbox',
-    checked: colorMode.value === 'dark',
-    onUpdateChecked(checked: boolean) {
-      if (checked) {
-        colorMode.preference = 'dark'
+  ],
+  [
+    {
+      label: 'Sair',
+      icon: 'i-lucide-log-out',
+      async onSelect() {
+        useAuth().logout()
+        await navigateTo('/login')
       }
-    },
-    onSelect(e: Event) {
-      e.preventDefault()
     }
-  }]
-}], [{
-  label: 'Templates',
-  icon: 'i-lucide-layout-template',
-  children: [{
-    label: 'Starter',
-    to: 'https://starter-template.nuxt.dev/'
-  }, {
-    label: 'Landing',
-    to: 'https://landing-template.nuxt.dev/'
-  }, {
-    label: 'Docs',
-    to: 'https://docs-template.nuxt.dev/'
-  }, {
-    label: 'SaaS',
-    to: 'https://saas-template.nuxt.dev/'
-  }, {
-    label: 'Dashboard',
-    to: 'https://dashboard-template.nuxt.dev/',
-    color: 'primary',
-    checked: true,
-    type: 'checkbox'
-  }, {
-    label: 'Chat',
-    to: 'https://chat-template.nuxt.dev/'
-  }, {
-    label: 'Portfolio',
-    to: 'https://portfolio-template.nuxt.dev/'
-  }, {
-    label: 'Changelog',
-    to: 'https://changelog-template.nuxt.dev/'
-  }]
-}], [{
-  label: 'Documentation',
-  icon: 'i-lucide-book-open',
-  to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
-  target: '_blank'
-}, {
-  label: 'GitHub repository',
-  icon: 'i-simple-icons-github',
-  to: 'https://github.com/nuxt-ui-templates/dashboard',
-  target: '_blank'
-}, {
-  label: 'Log out',
-  icon: 'i-lucide-log-out'
-}]]))
+  ]
+])
 </script>
 
 <template>
   <UDropdownMenu
     :items="items"
     :content="{ align: 'center', collisionPadding: 12 }"
-    :ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
+    :ui="{
+      content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)'
+    }"
   >
     <UButton
       v-bind="{
         ...user,
-        label: collapsed ? undefined : user?.name,
+        label: collapsed ? undefined : user?.email,
         trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
       }"
       color="neutral"
diff --git a/app/components/home/HomeChart.client.vue b/app/components/home/HomeChart.client.vue
index 3b47fab..e5a7b2a 100644
--- a/app/components/home/HomeChart.client.vue
+++ b/app/components/home/HomeChart.client.vue
@@ -1,6 +1,18 @@
 <script setup lang="ts">
-import { eachDayOfInterval, eachWeekOfInterval, eachMonthOfInterval, format } from 'date-fns'
-import { VisXYContainer, VisLine, VisAxis, VisArea, VisCrosshair, VisTooltip } from '@unovis/vue'
+import {
+  eachDayOfInterval,
+  eachWeekOfInterval,
+  eachMonthOfInterval,
+  format
+} from 'date-fns'
+import {
+  VisXYContainer,
+  VisLine,
+  VisAxis,
+  VisArea,
+  VisCrosshair,
+  VisTooltip
+} from '@unovis/vue'
 import type { Period, Range } from '~/types'
 
 const cardRef = useTemplateRef<HTMLElement | null>('cardRef')
@@ -19,32 +31,47 @@ const { width } = useElementSize(cardRef)
 
 const data = ref<DataRecord[]>([])
 
-watch([() => props.period, () => props.range], () => {
-  const dates = ({
-    daily: eachDayOfInterval,
-    weekly: eachWeekOfInterval,
-    monthly: eachMonthOfInterval
-  } as Record<Period, typeof eachDayOfInterval>)[props.period](props.range)
-
-  const min = 1000
-  const max = 10000
-
-  data.value = dates.map(date => ({ date, amount: Math.floor(Math.random() * (max - min + 1)) + min }))
-}, { immediate: true })
+watch(
+  [() => props.period, () => props.range],
+  () => {
+    const dates = (
+      {
+        daily: eachDayOfInterval,
+        weekly: eachWeekOfInterval,
+        monthly: eachMonthOfInterval
+      } as Record<Period, typeof eachDayOfInterval>
+    )[props.period](props.range)
+
+    const min = 1000
+    const max = 10000
+
+    data.value = dates.map((date) => ({
+      date,
+      amount: Math.floor(Math.random() * (max - min + 1)) + min
+    }))
+  },
+  { immediate: true }
+)
 
 const x = (_: DataRecord, i: number) => i
 const y = (d: DataRecord) => d.amount
 
-const total = computed(() => data.value.reduce((acc: number, { amount }) => acc + amount, 0))
+const total = computed(() =>
+  data.value.reduce((acc: number, { amount }) => acc + amount, 0)
+)
 
-const formatNumber = new Intl.NumberFormat('en', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format
+const formatNumber = new Intl.NumberFormat('en', {
+  style: 'currency',
+  currency: 'USD',
+  maximumFractionDigits: 0
+}).format
 
 const formatDate = (date: Date): string => {
-  return ({
+  return {
     daily: format(date, 'd MMM'),
     weekly: format(date, 'd MMM'),
     monthly: format(date, 'MMM yyy')
-  })[props.period]
+  }[props.period]
 }
 
 const xTicks = (i: number) => {
@@ -55,16 +82,18 @@ const xTicks = (i: number) => {
   return formatDate(data.value[i].date)
 }
 
-const template = (d: DataRecord) => `${formatDate(d.date)}: ${formatNumber(d.amount)}`
+const template = (d: DataRecord) =>
+  `${formatDate(d.date)}: ${formatNumber(d.amount)}`
 </script>
 
 <template>
-  <UCard ref="cardRef" :ui="{ root: 'overflow-visible', body: '!px-0 !pt-0 !pb-3' }">
+  <UCard
+    ref="cardRef"
+    :ui="{ root: 'overflow-visible', body: '!px-0 !pt-0 !pb-3' }"
+  >
     <template #header>
       <div>
-        <p class="text-xs text-muted uppercase mb-1.5">
-          Revenue
-        </p>
+        <p class="text-xs text-muted uppercase mb-1.5">Revenue</p>
         <p class="text-3xl text-highlighted font-semibold">
           {{ formatNumber(total) }}
         </p>
@@ -77,28 +106,12 @@ const template = (d: DataRecord) => `${formatDate(d.date)}: ${formatNumber(d.amo
       class="h-96"
       :width="width"
     >
-      <VisLine
-        :x="x"
-        :y="y"
-        color="var(--ui-primary)"
-      />
-      <VisArea
-        :x="x"
-        :y="y"
-        color="var(--ui-primary)"
-        :opacity="0.1"
-      />
-
-      <VisAxis
-        type="x"
-        :x="x"
-        :tick-format="xTicks"
-      />
-
-      <VisCrosshair
-        color="var(--ui-primary)"
-        :template="template"
-      />
+      <VisLine :x="x" :y="y" color="var(--ui-primary)" />
+      <VisArea :x="x" :y="y" color="var(--ui-primary)" :opacity="0.1" />
+
+      <VisAxis type="x" :x="x" :tick-format="xTicks" />
+
+      <VisCrosshair color="var(--ui-primary)" :template="template" />
 
       <VisTooltip />
     </VisXYContainer>
diff --git a/app/components/home/HomeStats.vue b/app/components/home/HomeStats.vue
index dd55233..88a34c7 100644
--- a/app/components/home/HomeStats.vue
+++ b/app/components/home/HomeStats.vue
@@ -70,7 +70,7 @@ const { data: stats } = await useAsyncData<Stat[]>('stats', async () => {
       :key="index"
       :icon="stat.icon"
       :title="stat.title"
-      to="/users"
+      to="/settings/users"
       variant="subtle"
       :ui="{
         container: 'gap-y-1.5',
diff --git a/app/components/settings/MembersList.vue b/app/components/settings/MembersList.vue
deleted file mode 100644
index 33fc867..0000000
--- a/app/components/settings/MembersList.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import type { DropdownMenuItem } from '@nuxt/ui'
-import type { Member } from '~/types'
-
-defineProps<{
-  members: Member[]
-}>()
-
-const items = [{
-  label: 'Edit member',
-  onSelect: () => console.log('Edit member')
-}, {
-  label: 'Remove member',
-  color: 'error' as const,
-  onSelect: () => console.log('Remove member')
-}] satisfies DropdownMenuItem[]
-</script>
-
-<template>
-  <ul role="list" class="divide-y divide-default">
-    <li
-      v-for="(member, index) in members"
-      :key="index"
-      class="flex items-center justify-between gap-3 py-3 px-4 sm:px-6"
-    >
-      <div class="flex items-center gap-3 min-w-0">
-        <UAvatar
-          v-bind="member.avatar"
-          size="md"
-        />
-
-        <div class="text-sm min-w-0">
-          <p class="text-highlighted font-medium truncate">
-            {{ member.name }}
-          </p>
-          <p class="text-muted truncate">
-            {{ member.username }}
-          </p>
-        </div>
-      </div>
-
-      <div class="flex items-center gap-3">
-        <USelect
-          :model-value="member.role"
-          :items="['member', 'owner']"
-          color="neutral"
-          :ui="{ value: 'capitalize', item: 'capitalize' }"
-        />
-
-        <UDropdownMenu :items="items" :content="{ align: 'end' }">
-          <UButton
-            icon="i-lucide-ellipsis-vertical"
-            color="neutral"
-            variant="ghost"
-          />
-        </UDropdownMenu>
-      </div>
-    </li>
-  </ul>
-</template>
diff --git a/app/components/users/AddModal.vue b/app/components/settings/users/AddModal.vue
similarity index 100%
rename from app/components/users/AddModal.vue
rename to app/components/settings/users/AddModal.vue
diff --git a/app/components/users/DeleteModal.vue b/app/components/settings/users/DeleteModal.vue
similarity index 67%
rename from app/components/users/DeleteModal.vue
rename to app/components/settings/users/DeleteModal.vue
index 85f5a7c..2db54b3 100644
--- a/app/components/users/DeleteModal.vue
+++ b/app/components/settings/users/DeleteModal.vue
@@ -1,26 +1,24 @@
 <script setup lang="ts">
-withDefaults(defineProps<{
-  count?: number
-}>(), {
-  count: 0
-})
+const props = defineProps<{
+  userId?: string
+}>()
 
 const open = ref(false)
 
 async function onSubmit() {
-  await new Promise(resolve => setTimeout(resolve, 1000))
+  await new Promise((resolve) => setTimeout(resolve, 1000))
   open.value = false
 }
+
+defineExpose({ open })
 </script>
 
 <template>
   <UModal
     v-model:open="open"
-    :title="`Excluir ${count} usuário${count > 1 ? 's' : ''}`"
-    :description="`Você tem certeza, esta ação não pode ser desfeita.`"
+    title="Excluir usuário"
+    :description="`Deseja excluir o usuário ${props.userId}? Esta ação não pode ser desfeita.`"
   >
-    <slot />
-
     <template #body>
       <div class="flex justify-end gap-2">
         <UButton
@@ -29,6 +27,7 @@ async function onSubmit() {
           variant="subtle"
           @click="open = false"
         />
+
         <UButton
           label="Excluir"
           color="error"
diff --git a/app/components/settings/users/List.vue b/app/components/settings/users/List.vue
new file mode 100644
index 0000000..eb187ec
--- /dev/null
+++ b/app/components/settings/users/List.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { User } from '~/types'
+
+defineProps<{
+  users: User[]
+}>()
+
+const deleteModal = useTemplateRef('deleteModal')
+const selectedUserId = ref<string | undefined>(undefined)
+
+// items agora é uma FUNÇÃO que recebe o id do usuário
+const items = (user: User): DropdownMenuItem[] => [
+  {
+    label: 'Editar usuário',
+    icon: 'i-lucide-edit-2',
+    onSelect: () => console.log('Edit user')
+  },
+  {
+    label: 'Excluir usuário',
+    icon: 'i-lucide-trash',
+    color: 'error' as const,
+    onSelect() {
+      selectedUserId.value = user.id
+      deleteModal.value!.open = true
+    }
+  }
+]
+</script>
+
+<template>
+  <ul role="list" class="divide-y divide-default">
+    <li
+      v-for="(user, index) in users"
+      :key="index"
+      class="flex items-center justify-between gap-3 py-3 px-4 sm:px-6"
+    >
+      <div class="flex items-center gap-3 min-w-0">
+        <UAvatar v-bind="user.avatar" size="md" />
+
+        <div class="text-sm min-w-0">
+          <p class="text-highlighted font-medium truncate">
+            {{ user.name }}
+          </p>
+          <p class="text-muted truncate">
+            {{ user.email }}
+          </p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <USelect
+          :model-value="user.role"
+          :items="['user', 'admin']"
+          color="neutral"
+          :ui="{ value: 'capitalize', item: 'capitalize' }"
+        />
+
+        <!-- passa o id do usuário para os items -->
+        <UDropdownMenu :items="items(user)" :content="{ align: 'end' }">
+          <UButton
+            icon="i-lucide-ellipsis-vertical"
+            color="neutral"
+            variant="ghost"
+          />
+        </UDropdownMenu>
+      </div>
+    </li>
+  </ul>
+
+  <SettingsUsersDeleteModal ref="deleteModal" :user-id="selectedUserId" />
+</template>
diff --git a/app/composables/useAuth.ts b/app/composables/useAuth.ts
index cf2e1a9..3af37dc 100644
--- a/app/composables/useAuth.ts
+++ b/app/composables/useAuth.ts
@@ -1,37 +1,43 @@
 export const useAuth = () => {
-  const supabaseClient = useSupabaseClient()
+  const supabase = useSupabaseClient()
+  const user = ref<any>(null)
+
+  const loadAuthUser = async () => {
+    const { data } = await supabase.auth.getUser()
+    user.value = data.user
+    console.log('Auth user loaded:', user.value)
+  }
 
   const login = async (email: string, password: string) => {
-    const { error } = await supabaseClient.auth.signInWithPassword({
+    const { data, error } = await supabase.auth.signInWithPassword({
       email,
       password
     })
 
-    if (error) {
-      throw new Error(error.message)
-    }
+    if (error) throw new Error(error.message)
+    user.value = data.user
   }
 
   const register = async (email: string, password: string) => {
-    const { error } = await supabaseClient.auth.signUp({
+    const { data, error } = await supabase.auth.signUp({
       email,
       password
     })
 
-    if (error) {
-      throw new Error(error.message)
-    }
+    if (error) throw new Error(error.message)
+    user.value = data.user
   }
 
   const logout = async () => {
-    const { error } = await supabaseClient.auth.signOut()
-
-    if (error) {
-      throw new Error(error.message)
-    }
+    await supabase.auth.signOut()
+    user.value = null
   }
 
+  loadAuthUser()
+
   return {
+    user,
+    loadAuthUser,
     login,
     register,
     logout
diff --git a/app/composables/useDashboard.ts b/app/composables/useDashboard.ts
index b460886..9623e1b 100644
--- a/app/composables/useDashboard.ts
+++ b/app/composables/useDashboard.ts
@@ -1,12 +1,11 @@
 import { createSharedComposable } from '@vueuse/core'
 
 const _useDashboard = () => {
-  const route = useRoute()
   const router = useRouter()
 
   defineShortcuts({
     'g-h': () => router.push('/'),
-    'g-u': () => router.push('/users'),
+    'g-a': () => router.push('/anuncios'),
     'g-s': () => router.push('/settings'),
   })
 }
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index d518410..b680dcc 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -5,73 +5,98 @@ const route = useRoute()
 
 const open = ref(false)
 
-const links = [[{
-  label: 'Home',
-  icon: 'i-lucide-house',
-  to: '/',
-  onSelect: () => {
-    open.value = false
-  }
-}, {
-  label: 'Usuários',
-  icon: 'i-lucide-users',
-  to: '/users',
-  onSelect: () => {
-    open.value = false
-  }
-}, {
-  label: 'Configurações',
-  to: '/settings',
-  icon: 'i-lucide-settings',
-  defaultOpen: true,
-  type: 'trigger',
-  children: [{
-    label: 'Geral',
-    to: '/settings',
-    exact: true,
-    onSelect: () => {
-      open.value = false
-    }
-  }, {
-    label: 'Members',
-    to: '/settings/members',
-    onSelect: () => {
-      open.value = false
-    }
-  }, {
-    label: 'Segurança',
-    to: '/settings/security',
-    onSelect: () => {
-      open.value = false
+const links = [
+  [
+    {
+      label: 'Home',
+      icon: 'i-lucide-house',
+      to: '/',
+      onSelect: () => {
+        open.value = false
+      }
+    },
+    {
+      label: 'Anúncios',
+      icon: 'i-lucide-megaphone',
+      to: '/anuncios',
+      onSelect: () => {
+        open.value = false
+      }
+    },
+    {
+      label: 'Configurações',
+      to: '/settings',
+      icon: 'i-lucide-settings',
+      defaultOpen: true,
+      type: 'trigger',
+      children: [
+        {
+          label: 'Geral',
+          to: '/settings',
+          exact: true,
+          onSelect: () => {
+            open.value = false
+          }
+        },
+        {
+          label: 'Anúncios',
+          to: '/settings/anuncios',
+          onSelect: () => {
+            open.value = false
+          }
+        },
+        {
+          label: 'Usuários',
+          to: '/settings/users',
+          onSelect: () => {
+            open.value = false
+          }
+        },
+        {
+          label: 'Segurança',
+          to: '/settings/security',
+          onSelect: () => {
+            open.value = false
+          }
+        }
+      ]
     }
-  }]
-}], [{
-  label: 'Feedback',
-  icon: 'i-lucide-message-circle',
-  to: 'https://github.com/nuxt-ui-templates/dashboard',
-  target: '_blank'
-}, {
-  label: 'Help & Support',
-  icon: 'i-lucide-info',
-  to: 'https://github.com/nuxt-ui-templates/dashboard',
-  target: '_blank'
-}]] satisfies NavigationMenuItem[][]
+  ]
+  // [{
+  //   label: 'Feedback',
+  //   icon: 'i-lucide-message-circle',
+  //   to: 'https://github.com/nuxt-ui-templates/dashboard',
+  //   target: '_blank'
+  // }, {
+  //   label: 'Help & Support',
+  //   icon: 'i-lucide-info',
+  //   to: 'https://github.com/nuxt-ui-templates/dashboard',
+  //   target: '_blank'
+  // }]
+] satisfies NavigationMenuItem[][]
 
-const groups = computed(() => [{
-  id: 'links',
-  label: 'Go to',
-  items: links.flat()
-}, {
-  id: 'code',
-  label: 'Code',
-  items: [{
-    id: 'source',
-    label: 'View page source',
-    icon: 'i-simple-icons-github',
-    to: `https://github.com/nuxt-ui-templates/dashboard/blob/main/app/pages${route.path === '/' ? '/index' : route.path}.vue`,
-    target: '_blank'
-  }]
-}])
+const groups = computed(() => [
+  {
+    id: 'links',
+    label: 'Go to',
+    items: links.flat()
+  },
+  {
+    id: 'code',
+    label: 'Code',
+    items: [
+      {
+        id: 'source',
+        label: 'View page source',
+        icon: 'i-simple-icons-github',
+        to: `https://github.com/nuxt-ui-templates/dashboard/blob/main/app/pages${
+          route.path === '/' ? '/index' : route.path
+        }.vue`,
+        target: '_blank'
+      }
+    ]
+  }
+])
 </script>
 
 <template>
@@ -89,7 +114,10 @@ const groups = computed(() => [{
       </template>
 
       <template #default="{ collapsed }">
-        <UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-default" />
+        <UDashboardSearchButton
+          :collapsed="collapsed"
+          class="bg-transparent ring-default"
+        />
 
         <UNavigationMenu
           :collapsed="collapsed"
diff --git a/app/pages/anuncios.vue b/app/pages/anuncios.vue
index 996a34f..eaefb1e 100644
--- a/app/pages/anuncios.vue
+++ b/app/pages/anuncios.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  layout: false
+})
+
 const { loadVideos, videos } = useAnuncios()
 
 const current = ref(0)
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 0b41ff1..9ef3847 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -6,7 +6,7 @@ import type { Period, Range } from '~/types'
 const items = [[{
   label: 'Novo Usuário',
   icon: 'i-lucide-user-plus',
-  to: '/users'
+  to: '/settings/users'
 }]] satisfies DropdownMenuItem[][]
 
 const range = shallowRef<Range>({
diff --git a/app/pages/login.vue b/app/pages/login.vue
index b0a80ba..3971489 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -6,7 +6,7 @@ definePageMeta({
   layout: false
 })
 
-// const toast = useToast()
+const toast = useToast()
 const { login } = useAuth()
 
 const fields: AuthFormField[] = [
@@ -56,7 +56,18 @@ type Schema = z.output<typeof schema>
 
 async function onSubmit(payload: FormSubmitEvent<Schema>) {
   const { email, password } = payload.data
-  await login(email, password)
+
+  try {
+    await login(email, password)
+    await navigateTo('/')
+  } catch (err: any) {
+    toast.add({
+      title: 'Falha no login',
+      description: err?.message || 'Credenciais inválidas.',
+      color: 'error',
+      icon: 'i-lucide-x'
+    })
+  }
 }
 </script>
 
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 4cf21ba..34c6247 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -1,31 +1,45 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
 
-const links = [[{
-  label: 'Geral',
-  icon: 'i-lucide-user',
-  to: '/settings',
-  exact: true
-}, {
-  label: 'Membros',
-  icon: 'i-lucide-users',
-  to: '/settings/members'
-}, {
-  label: 'Segurança',
-  icon: 'i-lucide-shield',
-  to: '/settings/security'
-}], [{
-  label: 'Documentation',
-  icon: 'i-lucide-book-open',
-  to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
-  target: '_blank'
-}]] satisfies NavigationMenuItem[][]
+const links = [
+  [
+    {
+      label: 'Geral',
+      icon: 'i-lucide-user',
+      to: '/settings',
+      exact: true
+    },
+    {
+      label: 'Anúncios',
+      icon: 'i-lucide-megaphone',
+      to: '/settings/anuncios'
+    },
+    {
+      label: 'Usuários',
+      icon: 'i-lucide-users',
+      to: '/settings/users'
+    },
+    {
+      label: 'Segurança',
+      icon: 'i-lucide-shield',
+      to: '/settings/security'
+    }
+  ]
+  // [
+  //   {
+  //     label: 'Documentation',
+  //     icon: 'i-lucide-book-open',
+  //     to: 'https://ui.nuxt.com/docs/getting-started/installation/nuxt',
+  //     target: '_blank'
+  //   }
+  // ]
+] satisfies NavigationMenuItem[][]
 </script>
 
 <template>
   <UDashboardPanel id="settings" :ui="{ body: 'lg:py-12' }">
     <template #header>
-      <UDashboardNavbar title="Settings">
+      <UDashboardNavbar title="Configurações">
         <template #leading>
           <UDashboardSidebarCollapse />
         </template>
@@ -38,7 +52,9 @@ const links = [[{
     </template>
 
     <template #body>
-      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
+      <div
+        class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto"
+      >
         <NuxtPage />
       </div>
     </template>
diff --git a/app/pages/settings/index.vue b/app/pages/settings/index.vue
index 036c5c2..cd9cc41 100644
--- a/app/pages/settings/index.vue
+++ b/app/pages/settings/index.vue
@@ -2,25 +2,20 @@
 import * as z from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
-const fileRef = ref<HTMLInputElement>()
+// const fileRef = ref<HTMLInputElement>()
 
 const profileSchema = z.object({
   name: z.string().min(2, 'Too short'),
-  email: z.string().email('Invalid email'),
-  username: z.string().min(2, 'Too short'),
-  avatar: z.string().optional(),
-  bio: z.string().optional()
+  email: z.string().email('Invalid email')
 })
 
 type ProfileSchema = z.output<typeof profileSchema>
 
 const profile = reactive<Partial<ProfileSchema>>({
   name: 'Benjamin Canac',
-  email: 'ben@nuxtlabs.com',
-  username: 'benjamincanac',
-  avatar: undefined,
-  bio: undefined
+  email: 'ben@nuxtlabs.com'
 })
+
 const toast = useToast()
 async function onSubmit(event: FormSubmitEvent<ProfileSchema>) {
   toast.add({
@@ -32,19 +27,19 @@ async function onSubmit(event: FormSubmitEvent<ProfileSchema>) {
   console.log(event.data)
 }
 
-function onFileChange(e: Event) {
-  const input = e.target as HTMLInputElement
+// function onFileChange(e: Event) {
+//   const input = e.target as HTMLInputElement
 
-  if (!input.files?.length) {
-    return
-  }
+//   if (!input.files?.length) {
+//     return
+//   }
 
-  profile.avatar = URL.createObjectURL(input.files[0]!)
-}
+//   profile.avatar = URL.createObjectURL(input.files[0]!)
+// }
 
-function onFileClick() {
-  fileRef.value?.click()
-}
+// function onFileClick() {
+//   fileRef.value?.click()
+// }
 </script>
 
 <template>
@@ -55,15 +50,15 @@ function onFileClick() {
     @submit="onSubmit"
   >
     <UPageCard
-      title="Profile"
-      description="These informations will be displayed publicly."
+      title="Perfil"
+      description="Essas informações serão exibidas"
       variant="naked"
       orientation="horizontal"
-      class="mb-4"
+      class="mb-4 w-full"
     >
       <UButton
         form="settings"
-        label="Save changes"
+        label="Salvar alterações"
         color="neutral"
         type="submit"
         class="w-fit lg:ms-auto"
@@ -74,44 +69,23 @@ function onFileClick() {
       <UFormField
         name="name"
         label="Name"
-        description="Will appear on receipts, invoices, and other communication."
+        description="Seu nome"
         required
         class="flex max-sm:flex-col justify-between items-start gap-4"
       >
-        <UInput
-          v-model="profile.name"
-          autocomplete="off"
-        />
+        <UInput v-model="profile.name" autocomplete="off" />
       </UFormField>
       <USeparator />
       <UFormField
         name="email"
         label="Email"
-        description="Used to sign in, for email receipts and product updates."
-        required
-        class="flex max-sm:flex-col justify-between items-start gap-4"
-      >
-        <UInput
-          v-model="profile.email"
-          type="email"
-          autocomplete="off"
-        />
-      </UFormField>
-      <USeparator />
-      <UFormField
-        name="username"
-        label="Username"
-        description="Your unique username for logging in and your profile URL."
+        description="Usado para fazer login"
         required
         class="flex max-sm:flex-col justify-between items-start gap-4"
       >
-        <UInput
-          v-model="profile.username"
-          type="username"
-          autocomplete="off"
-        />
+        <UInput v-model="profile.email" type="email" autocomplete="off" />
       </UFormField>
-      <USeparator />
+      <!-- <USeparator />
       <UFormField
         name="avatar"
         label="Avatar"
@@ -137,8 +111,8 @@ function onFileClick() {
             @change="onFileChange"
           >
         </div>
-      </UFormField>
-      <USeparator />
+      </UFormField> -->
+      <!-- <USeparator />
       <UFormField
         name="bio"
         label="Bio"
@@ -152,7 +126,7 @@ function onFileClick() {
           autoresize
           class="w-full"
         />
-      </UFormField>
+      </UFormField> -->
     </UPageCard>
   </UForm>
 </template>
diff --git a/app/pages/settings/members.vue b/app/pages/settings/members.vue
deleted file mode 100644
index ef9a73a..0000000
--- a/app/pages/settings/members.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import type { Member } from '~/types'
-
-const { data: members } = await useFetch<Member[]>('/api/members', { default: () => [] })
-
-const q = ref('')
-
-const filteredMembers = computed(() => {
-  return members.value.filter((member) => {
-    return member.name.search(new RegExp(q.value, 'i')) !== -1 || member.username.search(new RegExp(q.value, 'i')) !== -1
-  })
-})
-</script>
-
-<template>
-  <div>
-    <UPageCard
-      title="Members"
-      description="Invite new members by email address."
-      variant="naked"
-      orientation="horizontal"
-      class="mb-4"
-    >
-      <UButton
-        label="Invite people"
-        color="neutral"
-        class="w-fit lg:ms-auto"
-      />
-    </UPageCard>
-
-    <UPageCard variant="subtle" :ui="{ container: 'p-0 sm:p-0 gap-y-0', wrapper: 'items-stretch', header: 'p-4 mb-0 border-b border-default' }">
-      <template #header>
-        <UInput
-          v-model="q"
-          icon="i-lucide-search"
-          placeholder="Search members"
-          autofocus
-          class="w-full"
-        />
-      </template>
-
-      <SettingsMembersList :members="filteredMembers" />
-    </UPageCard>
-  </div>
-</template>
diff --git a/app/pages/settings/users.vue b/app/pages/settings/users.vue
new file mode 100644
index 0000000..dd76a6d
--- /dev/null
+++ b/app/pages/settings/users.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { User } from '~/types'
+
+const { users, loadUsers } = useUsers()
+
+await loadUsers()
+
+const q = ref('')
+
+const data = computed<User[]>(() =>
+  users.value.map((u) => ({
+    id: u.user_id,
+    name: u.name || 'Usuário',
+    email: u.email || '',
+    avatar: {
+      src: `https://api.dicebear.com/8.x/initials/svg?seed=${
+        u.name || u.email
+      }`,
+      alt: u.name || u.email
+    },
+    role: u.role || 'user'
+  }))
+)
+
+const filteredUsers = computed(() =>
+  data.value.filter(
+    (user) =>
+      user.name.match(new RegExp(q.value, 'i')) ||
+      user.email.match(new RegExp(q.value, 'i'))
+  )
+)
+</script>
+
+<template>
+  <div>
+    <UPageCard
+      title="Usuários"
+      description="Gerencie os usuários do sistema."
+      variant="naked"
+      orientation="horizontal"
+      class="mb-4"
+    >
+      <SettingsUsersAddModal class="w-fit lg:ms-auto" />
+    </UPageCard>
+
+    <UPageCard
+      variant="subtle"
+      :ui="{
+        container: 'p-0 sm:p-0 gap-y-0',
+        wrapper: 'items-stretch',
+        header: 'p-4 mb-0 border-b border-default'
+      }"
+    >
+      <template #header>
+        <UInput
+          v-model="q"
+          icon="i-lucide-search"
+          placeholder="Buscar usuários"
+          autofocus
+          class="w-full"
+        />
+      </template>
+
+      <SettingsUsersList :users="filteredUsers" />
+    </UPageCard>
+  </div>
+</template>
diff --git a/app/pages/users.vue b/app/pages/users.vue
deleted file mode 100644
index 1e2112d..0000000
--- a/app/pages/users.vue
+++ /dev/null
@@ -1,336 +0,0 @@
-<script setup lang="ts">
-import type { TableColumn } from '@nuxt/ui'
-import { upperFirst } from 'scule'
-import { getPaginationRowModel } from '@tanstack/table-core'
-import 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 { users, loading, loadUsers } = useUsers()
-
-await loadUsers()
-
-const data = computed<User[]>(() =>
-  users.value.map(p => ({
-    id: p.user_id,
-    name: p.email?.split('@')[0] || 'Usuário',
-    email: p.email || '',
-    avatar: {
-      src: `https://api.dicebear.com/8.x/initials/svg?seed=${p.email || 'U'}`,
-      alt: p.email || 'user'
-    },
-    status: p.role || 'user'
-  }))
-)
-
-const status = computed(() => (loading.value ? 'pending' : 'success'))
-
-
-function getRowItems(row: Row<User>) {
-  return [
-    {
-      type: 'label',
-      label: 'Actions'
-    },
-    {
-      label: 'Copiar ID do usuário',
-      icon: 'i-lucide-copy',
-      onSelect() {
-        navigator.clipboard.writeText(row.original.id.toString())
-        toast.add({
-          title: 'Copiado para a área de transferência',
-          description: 'ID do usuário copiado para a área de transferência'
-        })
-      }
-    },
-    {
-      type: 'separator'
-    },
-    {
-      label: 'Ver detalhes do usuário',
-      icon: 'i-lucide-list'
-    },
-    {
-      type: 'separator'
-    },
-    {
-      label: 'Excluir usuário',
-      icon: 'i-lucide-trash',
-      color: 'error',
-      onSelect() {
-        toast.add({
-          title: 'Usuário excluído',
-          description: 'O usuário foi excluído.'
-        })
-      }
-    }
-  ]
-}
-
-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-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: 'status',
-    header: 'Status',
-    filterFn: 'equals',
-    cell: ({ row }) => {
-      const color = {
-        user: 'neutral' as const,
-        admin: 'success' 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 email = computed({
-  get: (): string => {
-    return (table.value?.tableApi?.getColumn('email')?.getFilterValue() as string) || ''
-  },
-  set: (value: string) => {
-    table.value?.tableApi?.getColumn('email')?.setFilterValue(value || undefined)
-  }
-})
-
-const pagination = ref({
-  pageIndex: 0,
-  pageSize: 10
-})
-</script>
-
-<template>
-  <UDashboardPanel id="usuarios">
-    <template #header>
-      <UDashboardNavbar title="Usuários">
-        <template #leading>
-          <UDashboardSidebarCollapse />
-        </template>
-
-        <template #right>
-          <UsersAddModal />
-        </template>
-      </UDashboardNavbar>
-    </template>
-
-    <template #body>
-      <div class="flex flex-wrap items-center justify-between gap-1.5">
-        <UInput
-          v-model="email"
-          class="max-w-sm"
-          icon="i-lucide-search"
-          placeholder="Filter emails..."
-        />
-
-        <div class="flex flex-wrap items-center gap-1.5">
-          <UsersDeleteModal :count="table?.tableApi?.getFilteredSelectedRowModel().rows.length">
-            <UButton
-              v-if="table?.tableApi?.getFilteredSelectedRowModel().rows.length"
-              label="Excluir"
-              color="error"
-              variant="subtle"
-              icon="i-lucide-trash"
-            >
-              <template #trailing>
-                <UKbd>
-                  {{ table?.tableApi?.getFilteredSelectedRowModel().rows.length }}
-                </UKbd>
-              </template>
-            </UButton>
-          </UsersDeleteModal>
-
-          <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: any) => column.getCanHide())
-                .map((column: any) => ({
-                  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-elevated/50 [&>tr]:after:content-none',
-          tbody: '[&>tr]:last:[&>td]:border-b-0',
-          th: 'py-2 first:rounded-l-lg last:rounded-r-lg border-y border-default first:border-l last:border-r',
-          td: 'border-b border-default',
-          separator: 'h-0'
-        }"
-      />
-
-      <div class="flex items-center justify-between gap-3 border-t border-default pt-4 mt-auto">
-        <div class="text-sm 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: number) => table?.tableApi?.setPageIndex(p - 1)"
-          />
-        </div>
-      </div>
-    </template>
-  </UDashboardPanel>
-</template>
diff --git a/app/types/index.d.ts b/app/types/index.d.ts
index c869b66..d61378e 100644
--- a/app/types/index.d.ts
+++ b/app/types/index.d.ts
@@ -8,7 +8,7 @@ export interface User {
   name: string
   email: string
   avatar?: AvatarProps
-  status: UserStatus
+  role: UserStatus
 }
 
 export interface Mail {
@@ -20,13 +20,6 @@ export interface Mail {
   date: string
 }
 
-export interface Member {
-  name: string
-  username: string
-  role: 'member' | 'owner'
-  avatar: AvatarProps
-}
-
 export interface Stat {
   title: string
   icon: string
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 03dc0fb..a4fcb31 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -4,6 +4,7 @@ import withNuxt from './.nuxt/eslint.config.mjs'
 export default withNuxt({
   rules: {
     'vue/no-multiple-template-root': 'off',
-    'vue/max-attributes-per-line': ['error', { singleline: 3 }]
+    'vue/max-attributes-per-line': ['error', { singleline: 3 }],
+    '@stylistic/arrow-parens': ['error', 'always']
   }
 })
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8420e04..a2ed9fe 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,11 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: [
-    '@nuxt/eslint',
-    '@nuxt/ui',
-    '@vueuse/nuxt',
-    '@nuxtjs/supabase'
-  ],
+  modules: ['@nuxt/eslint', '@nuxt/ui', '@vueuse/nuxt', '@nuxtjs/supabase'],
 
   devtools: {
     enabled: true
@@ -29,4 +24,4 @@ export default defineNuxtConfig({
       }
     }
   }
-})
\ No newline at end of file
+})
diff --git a/server/api/members.ts b/server/api/members.ts
deleted file mode 100644
index 8d4a00f..0000000
--- a/server/api/members.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-const members = [{
-  name: 'Anthony Fu',
-  username: 'antfu',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/antfu' }
-}, {
-  name: 'Baptiste Leproux',
-  username: 'larbish',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/larbish' }
-}, {
-  name: 'Benjamin Canac',
-  username: 'benjamincanac',
-  role: 'owner',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/benjamincanac' }
-}, {
-  name: 'Céline Dumerc',
-  username: 'celinedumerc',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/celinedumerc' }
-}, {
-  name: 'Daniel Roe',
-  username: 'danielroe',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/danielroe' }
-}, {
-  name: 'Farnabaz',
-  username: 'farnabaz',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/farnabaz' }
-}, {
-  name: 'Ferdinand Coumau',
-  username: 'FerdinandCoumau',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/FerdinandCoumau' }
-}, {
-  name: 'Hugo Richard',
-  username: 'hugorcd',
-  role: 'owner',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/hugorcd' }
-}, {
-  name: 'Pooya Parsa',
-  username: 'pi0',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/pi0' }
-}, {
-  name: 'Sarah Moriceau',
-  username: 'SarahM19',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/SarahM19' }
-}, {
-  name: 'Sébastien Chopin',
-  username: 'Atinux',
-  role: 'owner',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/atinux' }
-}]
-
-export default eventHandler(async () => {
-  return members
-})