big refactor

app/pages/settings/permissions.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { refDebounced } from '~/utils/refDebounced'
-import { ROLES_SEGUROS_SEED, SEGUROS_PERMISSION_COLUMNS } from '~/data/roles-seguros'
-import type { RoleRow } from '~/types/roles'
-
 usePageTitle('Permissions · Settings')
 
+interface RoleRow {
+  id: string
+  description: string
+  active: boolean
+  seguros: Record<string, boolean>
+}
+
 const pageSize = ref(10)
 const page = ref(1)
 const search = ref('')
-const debouncedSearch = refDebounced(search, 250)
 
 const pageSizeItems = [
   { label: '10', value: 10 },
@@ -16,17 +18,27 @@ const pageSizeItems = [
   { label: '50', value: 50 }
 ]
 
-const rows = ref<RoleRow[]>([...ROLES_SEGUROS_SEED])
+const SEGUROS_PERMISSION_COLUMNS = [
+  { key: 'quotes', label: 'Quotes', icon: 'i-heroicons-document-text' },
+  { key: 'policies', label: 'Policies', icon: 'i-heroicons-shield-check' },
+  { key: 'claims', label: 'Claims', icon: 'i-heroicons-exclamation-triangle' },
+  { key: 'billing', label: 'Billing', icon: 'i-heroicons-credit-card' },
+  { key: 'customers', label: 'Customers', icon: 'i-heroicons-users' },
+  { key: 'providers', label: 'Providers', icon: 'i-heroicons-building-office-2' },
+  { key: 'reports', label: 'Reports', icon: 'i-heroicons-chart-bar' },
+]
+
+const rows = ref<RoleRow[]>([])
 
 const filtered = computed(() => {
-  const q = debouncedSearch.value.trim().toLowerCase()
+  const q = search.value.trim().toLowerCase()
   if (!q) return rows.value
   return rows.value.filter(
     (r) => String(r.id).includes(q) || r.description.toLowerCase().includes(q)
   )
 })
 
-watch([debouncedSearch, pageSize], () => {
+watch([search, pageSize], () => {
   page.value = 1
 })