@create-lft-app/nextjs 3.1.0 → 3.2.0

package/template/src/modules/users/columns.tsx

@@ -1,86 +1,106 @@
-'use client'
-
-import { ColumnDef } from '@tanstack/react-table'
-import { MoreHorizontal } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { DataTableColumnHeader } from '@/components/tables/data-table-column-header'
-import type { User } from './schemas/users.schema'
-
-export const columns: ColumnDef<User>[] = [
-  {
-    accessorKey: 'name',
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Nombre" />
-    ),
-  },
-  {
-    accessorKey: 'email',
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Email" />
-    ),
-  },
-  {
-    accessorKey: 'role',
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Rol" />
-    ),
-    cell: ({ row }) => {
-      const role = row.getValue('role') as string
-      const labels: Record<string, string> = {
-        admin: 'Administrador',
-        user: 'Usuario',
-        viewer: 'Visualizador',
-      }
-      return labels[role] ?? role
-    },
-  },
-  {
-    accessorKey: 'created_at',
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Creado" />
-    ),
-    cell: ({ row }) => {
-      const date = new Date(row.getValue('created_at'))
-      return date.toLocaleDateString('es-ES')
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const user = row.original
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Abrir menú</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Acciones</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(user.id)}
-            >
-              Copiar ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>Ver detalles</DropdownMenuItem>
-            <DropdownMenuItem>Editar</DropdownMenuItem>
-            <DropdownMenuItem className="text-destructive">
-              Eliminar
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )
-    },
-  },
-]
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { MoreHorizontal } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { DataTableColumnHeader } from '@/components/tables/data-table-column-header'
+import { dateRangeFilterFn } from '@/components/tables/data-table-date-filter'
+// numberRangeFilterFn disponible para campos numéricos: import { numberRangeFilterFn } from '@/components/tables/data-table-number-filter'
+import { formatDate } from '@/lib/date'
+import { ROLE_LABELS } from '@/config/roles'
+import type { User } from './schemas/users.schema'
+import type { UserRole } from '@/config/roles'
+
+export const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: 'name',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Nombre" />
+    ),
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Email" />
+    ),
+  },
+  {
+    accessorKey: 'role',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Rol" />
+    ),
+    cell: ({ row }) => {
+      const role = row.getValue('role') as UserRole
+      return ROLE_LABELS[role] ?? role
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    },
+  },
+  {
+    accessorKey: 'created_at',
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Creado" />
+    ),
+    cell: ({ row }) => {
+      return formatDate(row.getValue('created_at'))
+    },
+    filterFn: dateRangeFilterFn,
+  },
+  // Ejemplo de columna numérica con filtro de rango:
+  // import { DEFAULT_LOCALE, DEFAULT_CURRENCY } from '@/lib/date'
+  // {
+  //   accessorKey: 'balance',
+  //   header: ({ column }) => (
+  //     <DataTableColumnHeader column={column} title="Balance" />
+  //   ),
+  //   cell: ({ row }) => {
+  //     const balance = row.getValue('balance') as number | undefined
+  //     if (balance === undefined || balance === null) return '-'
+  //     return new Intl.NumberFormat(DEFAULT_LOCALE, {
+  //       style: 'currency',
+  //       currency: DEFAULT_CURRENCY,
+  //     }).format(balance)
+  //   },
+  //   filterFn: numberRangeFilterFn,
+  // },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const user = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Abrir menú</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Acciones</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(user.id)}
+            >
+              Copiar ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Ver detalles</DropdownMenuItem>
+            <DropdownMenuItem>Editar</DropdownMenuItem>
+            <DropdownMenuItem className="text-destructive">
+              Eliminar
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]

package/template/src/modules/users/components/users-list.tsx

@@ -1,22 +1,48 @@
-'use client'
-
-import { DataTable } from '@/components/tables/data-table'
-import { useUsers } from '../hooks/useUsers'
-import { columns } from '../columns'
-
-export function UsersList() {
-  const { users, isLoading } = useUsers()
-
-  if (isLoading) {
-    return <div>Cargando usuarios...</div>
-  }
-
-  return (
-    <DataTable
-      columns={columns}
-      data={users}
-      searchKey="name"
-      searchPlaceholder="Buscar por nombre..."
-    />
-  )
-}
+'use client'
+
+import { DataTable, type FilterConfig } from '@/components/tables/data-table'
+import { ROLE_OPTIONS } from '@/config/roles'
+import { useUsers } from '../hooks/useUsers'
+import { columns } from '../columns'
+
+// Configuración de filtros para la tabla de usuarios
+const filters: FilterConfig[] = [
+  {
+    columnId: 'role',
+    type: 'faceted',
+    title: 'Rol',
+    options: ROLE_OPTIONS,
+  },
+  {
+    columnId: 'created_at',
+    type: 'date-range',
+    title: 'Fecha',
+  },
+  // Ejemplo de filtro numérico (rango):
+  // {
+  //   columnId: 'balance',
+  //   type: 'number-range',
+  //   title: 'Balance',
+  //   format: 'currency',
+  //   currencySymbol: '$',
+  // },
+]
+
+export function UsersList() {
+  const { users, isLoading } = useUsers()
+
+  if (isLoading) {
+    return <div>Cargando usuarios...</div>
+  }
+
+  return (
+    <DataTable
+      columns={columns}
+      data={users}
+      searchKey="name"
+      searchPlaceholder="Buscar por nombre..."
+      filters={filters}
+      filterMode="inline"
+    />
+  )
+}

package/template/src/modules/users/hooks/useUsers.ts

@@ -1,39 +1,39 @@
-'use client'
-
-import { useShallow } from 'zustand/react/shallow'
-import { useUsersStore } from '../stores/useUsersStore'
-import { useUsersQueries } from './useUsersQueries'
-import { useUsersMutations } from './useUsersMutations'
-
-/**
- * Hook unificado para usuarios.
- * Los componentes SOLO deben importar este hook, nunca useUsersQueries o useUsersMutations directamente.
- */
-export function useUsers() {
-  const state = useUsersStore(useShallow((s) => s.state))
-  const actions = useUsersStore(useShallow((s) => s.actions))
-
-  const queries = useUsersQueries(state.selectedUserId ?? undefined)
-  const mutations = useUsersMutations()
-
-  return {
-    // State from store (UI state)
-    ...state,
-    ...actions,
-
-    // Queries
-    users: queries.users,
-    user: queries.user,
-    isLoading: queries.isLoading,
-    isLoadingUser: queries.isLoadingUser,
-    error: queries.error,
-
-    // Mutations
-    createUser: mutations.create,
-    updateUser: mutations.update,
-    deleteUser: mutations.delete,
-    isCreating: mutations.isCreating,
-    isUpdating: mutations.isUpdating,
-    isDeleting: mutations.isDeleting,
-  }
-}
+'use client'
+
+import { useShallow } from 'zustand/react/shallow'
+import { useUsersStore } from '../stores/useUsersStore'
+import { useUsersQueries } from './useUsersQueries'
+import { useUsersMutations } from './useUsersMutations'
+
+/**
+ * Hook unificado para usuarios.
+ * Los componentes SOLO deben importar este hook, nunca useUsersQueries o useUsersMutations directamente.
+ */
+export function useUsers() {
+  const state = useUsersStore(useShallow((s) => s.state))
+  const actions = useUsersStore(useShallow((s) => s.actions))
+
+  const queries = useUsersQueries(state.selectedUserId ?? undefined)
+  const mutations = useUsersMutations()
+
+  return {
+    // State from store (UI state)
+    ...state,
+    ...actions,
+
+    // Queries
+    users: queries.users,
+    user: queries.user,
+    isLoading: queries.isLoading,
+    isLoadingUser: queries.isLoadingUser,
+    error: queries.error,
+
+    // Mutations
+    createUser: mutations.create,
+    updateUser: mutations.update,
+    deleteUser: mutations.delete,
+    isCreating: mutations.isCreating,
+    isUpdating: mutations.isUpdating,
+    isDeleting: mutations.isDeleting,
+  }
+}

package/template/src/modules/users/hooks/useUsersMutations.ts

@@ -1,55 +1,55 @@
-'use client'
-
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'sonner'
-import { createUser, updateUser, deleteUser } from '../actions/users-actions'
-import { usersKeys } from './useUsersQueries'
-import type { CreateUserInput, UpdateUserInput } from '../schemas/users.schema'
-
-export function useUsersMutations() {
-  const queryClient = useQueryClient()
-
-  const createMutation = useMutation({
-    mutationFn: (input: CreateUserInput) => createUser(input),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: usersKeys.lists() })
-      toast.success('Usuario creado correctamente')
-    },
-    onError: (error) => {
-      toast.error(error.message)
-    },
-  })
-
-  const updateMutation = useMutation({
-    mutationFn: ({ id, input }: { id: string; input: UpdateUserInput }) =>
-      updateUser(id, input),
-    onSuccess: (_, { id }) => {
-      queryClient.invalidateQueries({ queryKey: usersKeys.lists() })
-      queryClient.invalidateQueries({ queryKey: usersKeys.detail(id) })
-      toast.success('Usuario actualizado correctamente')
-    },
-    onError: (error) => {
-      toast.error(error.message)
-    },
-  })
-
-  const deleteMutation = useMutation({
-    mutationFn: (id: string) => deleteUser(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: usersKeys.lists() })
-      toast.success('Usuario eliminado correctamente')
-    },
-    onError: (error) => {
-      toast.error(error.message)
-    },
-  })
-
-  return {
-    create: createMutation.mutateAsync,
-    update: updateMutation.mutateAsync,
-    delete: deleteMutation.mutateAsync,
-    isCreating: createMutation.isPending,
-    isUpdating: updateMutation.isPending,
-    isDeleting: deleteMutation.isPending,
-  }
-}
+'use client'
+
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import { createUser, updateUser, deleteUser } from '../actions/users-actions'
+import { usersKeys } from './useUsersQueries'
+import type { CreateAuthUserInput, UpdateAuthUserInput } from '../schemas/users.schema'
+
+export function useUsersMutations() {
+  const queryClient = useQueryClient()
+
+  const createMutation = useMutation({
+    mutationFn: (input: CreateAuthUserInput) => createUser(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: usersKeys.lists() })
+      toast.success('Usuario creado correctamente')
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, input }: { id: string; input: UpdateAuthUserInput }) =>
+      updateUser(id, input),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: usersKeys.lists() })
+      queryClient.invalidateQueries({ queryKey: usersKeys.detail(id) })
+      toast.success('Usuario actualizado correctamente')
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteUser(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: usersKeys.lists() })
+      toast.success('Usuario eliminado correctamente')
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  return {
+    create: createMutation.mutateAsync,
+    update: updateMutation.mutateAsync,
+    delete: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+  }
+}

package/template/src/modules/users/hooks/useUsersQueries.ts

@@ -1,35 +1,35 @@
-'use client'
-
-import { useQuery } from '@tanstack/react-query'
-import { getUsers, getUserById } from '../actions/users-actions'
-
-export const usersKeys = {
-  all: ['users'] as const,
-  lists: () => [...usersKeys.all, 'list'] as const,
-  list: (filters: Record<string, unknown>) => [...usersKeys.lists(), filters] as const,
-  details: () => [...usersKeys.all, 'detail'] as const,
-  detail: (id: string) => [...usersKeys.details(), id] as const,
-}
-
-export function useUsersQueries(userId?: string) {
-  const usersQuery = useQuery({
-    queryKey: usersKeys.lists(),
-    queryFn: () => getUsers(),
-  })
-
-  const userQuery = useQuery({
-    queryKey: usersKeys.detail(userId!),
-    queryFn: () => getUserById(userId!),
-    enabled: !!userId,
-  })
-
-  return {
-    users: usersQuery.data ?? [],
-    user: userQuery.data,
-    isLoading: usersQuery.isLoading,
-    isLoadingUser: userQuery.isLoading,
-    error: usersQuery.error,
-    usersQuery,
-    userQuery,
-  }
-}
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import { getUsers, getUserById } from '../actions/users-actions'
+
+export const usersKeys = {
+  all: ['users'] as const,
+  lists: () => [...usersKeys.all, 'list'] as const,
+  list: (filters: Record<string, unknown>) => [...usersKeys.lists(), filters] as const,
+  details: () => [...usersKeys.all, 'detail'] as const,
+  detail: (id: string) => [...usersKeys.details(), id] as const,
+}
+
+export function useUsersQueries(userId?: string) {
+  const usersQuery = useQuery({
+    queryKey: usersKeys.lists(),
+    queryFn: () => getUsers(),
+  })
+
+  const userQuery = useQuery({
+    queryKey: usersKeys.detail(userId!),
+    queryFn: () => getUserById(userId!),
+    enabled: !!userId,
+  })
+
+  return {
+    users: usersQuery.data ?? [],
+    user: userQuery.data,
+    isLoading: usersQuery.isLoading,
+    isLoadingUser: userQuery.isLoading,
+    error: usersQuery.error,
+    usersQuery,
+    userQuery,
+  }
+}

package/template/src/modules/users/index.ts

@@ -1,12 +1,30 @@
-// Components
-export { UsersList } from './components/users-list'
-
-// Hooks - Solo exportar el hook unificado
-export { useUsers } from './hooks/useUsers'
-
-// Schemas
-export { userSchema, createUserSchema, updateUserSchema } from './schemas/users.schema'
-export type { User, CreateUserInput, UpdateUserInput } from './schemas/users.schema'
-
-// Columns
-export { columns as usersColumns } from './columns'
+// Components
+export { UsersList } from './components/users-list'
+
+// Hooks - Solo exportar el hook unificado
+export { useUsers } from './hooks/useUsers'
+
+// Schemas
+export {
+  userSchema,
+  createUserSchema,
+  updateUserSchema,
+  createAuthUserSchema,
+  updateAuthUserSchema,
+} from './schemas/users.schema'
+export type {
+  User,
+  CreateUserInput,
+  UpdateUserInput,
+  CreateAuthUserInput,
+  UpdateAuthUserInput,
+} from './schemas/users.schema'
+
+// Types - Auth User types
+export type { UserRole, UserAppMetadata, UserMetadata } from './types/auth-user.types'
+
+// Utils - Mappers
+export { mapAuthUserToUser, mapAuthUsersToUsers } from './utils/user-mapper'
+
+// Columns
+export { columns as usersColumns } from './columns'

package/template/src/modules/users/schemas/users.schema.ts

@@ -1,23 +1,51 @@
-import { z } from 'zod'
-
-export const userSchema = z.object({
-  id: z.string().uuid(),
-  email: z.string().email(),
-  name: z.string().min(1, 'El nombre es requerido'),
-  role: z.enum(['admin', 'user', 'viewer']).default('user'),
-  avatar_url: z.string().url().nullable().optional(),
-  created_at: z.string().datetime(),
-  updated_at: z.string().datetime(),
-})
-
-export const createUserSchema = userSchema.omit({
-  id: true,
-  created_at: true,
-  updated_at: true,
-})
-
-export const updateUserSchema = createUserSchema.partial()
-
-export type User = z.infer<typeof userSchema>
-export type CreateUserInput = z.infer<typeof createUserSchema>
-export type UpdateUserInput = z.infer<typeof updateUserSchema>
+import { z } from 'zod'
+import { USER_ROLES, DEFAULT_ROLE } from '@/config/roles'
+
+// Schema de rol reutilizable
+const roleSchema = z.enum(USER_ROLES)
+
+// Schema base del usuario (estructura que devuelve el mapper)
+export const userSchema = z.object({
+  id: z.string().uuid(),
+  email: z.string().email(),
+  name: z.string().min(1, 'El nombre es requerido'),
+  role: roleSchema.default(DEFAULT_ROLE),
+  avatar_url: z.string().url().nullable().optional(),
+  created_at: z.string().datetime(),
+  updated_at: z.string().datetime(),
+})
+
+// Schema para crear usuario via Supabase Auth Admin
+export const createAuthUserSchema = z.object({
+  email: z.string().email('Email inválido'),
+  password: z.string().min(8, 'Mínimo 8 caracteres').optional(),
+  name: z.string().min(1, 'El nombre es requerido'),
+  role: roleSchema.default(DEFAULT_ROLE),
+  avatar_url: z.string().url().nullable().optional(),
+  send_invite: z.boolean().default(true),
+})
+
+// Schema para actualizar usuario via Supabase Auth Admin
+export const updateAuthUserSchema = z.object({
+  email: z.string().email('Email inválido').optional(),
+  password: z.string().min(8, 'Mínimo 8 caracteres').optional(),
+  name: z.string().min(1, 'El nombre es requerido').optional(),
+  role: roleSchema.optional(),
+  avatar_url: z.string().url().nullable().optional(),
+})
+
+// Schemas legacy (mantener compatibilidad)
+export const createUserSchema = userSchema.omit({
+  id: true,
+  created_at: true,
+  updated_at: true,
+})
+
+export const updateUserSchema = createUserSchema.partial()
+
+// Types
+export type User = z.infer<typeof userSchema>
+export type CreateUserInput = z.infer<typeof createUserSchema>
+export type UpdateUserInput = z.infer<typeof updateUserSchema>
+export type CreateAuthUserInput = z.infer<typeof createAuthUserSchema>
+export type UpdateAuthUserInput = z.infer<typeof updateAuthUserSchema>