@create-lft-app/nextjs 1.0.2 → 3.0.0

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

@@ -0,0 +1,86 @@
+'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>
+      )
+    },
+  },
+]

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

@@ -0,0 +1,22 @@
+'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..."
+    />
+  )
+}

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

@@ -0,0 +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,
+  }
+}

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

@@ -0,0 +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,
+  }
+}

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

@@ -0,0 +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,
+  }
+}

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

@@ -0,0 +1,12 @@
+// 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'

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

@@ -0,0 +1,23 @@
+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>

package/template/src/modules/users/stores/useUsersStore.ts

@@ -0,0 +1,60 @@
+import { create } from 'zustand'
+
+interface UsersState {
+  state: {
+    selectedUserId: string | null
+    isFormOpen: boolean
+    isDeleteDialogOpen: boolean
+    searchQuery: string
+  }
+  actions: {
+    setSelectedUserId: (id: string | null) => void
+    openForm: () => void
+    closeForm: () => void
+    openDeleteDialog: (id: string) => void
+    closeDeleteDialog: () => void
+    setSearchQuery: (query: string) => void
+    reset: () => void
+  }
+}
+
+const initialState = {
+  selectedUserId: null,
+  isFormOpen: false,
+  isDeleteDialogOpen: false,
+  searchQuery: '',
+}
+
+export const useUsersStore = create<UsersState>()((set) => ({
+  state: initialState,
+  actions: {
+    setSelectedUserId: (id) =>
+      set((state) => ({
+        state: { ...state.state, selectedUserId: id },
+      })),
+    openForm: () =>
+      set((state) => ({
+        state: { ...state.state, isFormOpen: true },
+      })),
+    closeForm: () =>
+      set((state) => ({
+        state: { ...state.state, isFormOpen: false, selectedUserId: null },
+      })),
+    openDeleteDialog: (id) =>
+      set((state) => ({
+        state: { ...state.state, isDeleteDialogOpen: true, selectedUserId: id },
+      })),
+    closeDeleteDialog: () =>
+      set((state) => ({
+        state: { ...state.state, isDeleteDialogOpen: false, selectedUserId: null },
+      })),
+    setSearchQuery: (query) =>
+      set((state) => ({
+        state: { ...state.state, searchQuery: query },
+      })),
+    reset: () =>
+      set(() => ({
+        state: initialState,
+      })),
+  },
+}))

package/template/src/stores/index.ts

@@ -0,0 +1 @@
+export { useUiStore } from './useUiStore'

package/template/src/stores/useUiStore.ts

@@ -0,0 +1,55 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface UiState {
+  state: {
+    sidebarOpen: boolean
+    sidebarCollapsed: boolean
+    theme: 'light' | 'dark' | 'system'
+  }
+  actions: {
+    toggleSidebar: () => void
+    setSidebarOpen: (open: boolean) => void
+    toggleSidebarCollapsed: () => void
+    setSidebarCollapsed: (collapsed: boolean) => void
+    setTheme: (theme: 'light' | 'dark' | 'system') => void
+  }
+}
+
+export const useUiStore = create<UiState>()(
+  persist(
+    (set) => ({
+      state: {
+        sidebarOpen: true,
+        sidebarCollapsed: false,
+        theme: 'system',
+      },
+      actions: {
+        toggleSidebar: () =>
+          set((state) => ({
+            state: { ...state.state, sidebarOpen: !state.state.sidebarOpen },
+          })),
+        setSidebarOpen: (open) =>
+          set((state) => ({
+            state: { ...state.state, sidebarOpen: open },
+          })),
+        toggleSidebarCollapsed: () =>
+          set((state) => ({
+            state: { ...state.state, sidebarCollapsed: !state.state.sidebarCollapsed },
+          })),
+        setSidebarCollapsed: (collapsed) =>
+          set((state) => ({
+            state: { ...state.state, sidebarCollapsed: collapsed },
+          })),
+        setTheme: (theme) =>
+          set((state) => ({
+            state: { ...state.state, theme },
+          })),
+      },
+    }),
+    {
+      name: 'ui-storage',
+      partialize: (state) => ({ state: state.state }),
+    }
+  )
+)

package/template/src/types/api.ts

@@ -0,0 +1,28 @@
+export interface ApiResponse<T = unknown> {
+  data: T
+  success: boolean
+  message?: string
+}
+
+export interface ApiError {
+  message: string
+  code?: string
+  status?: number
+  details?: Record<string, unknown>
+}
+
+export interface PaginatedResponse<T> {
+  data: T[]
+  pagination: {
+    page: number
+    pageSize: number
+    total: number
+    totalPages: number
+  }
+}
+
+export interface ActionResult<T = void> {
+  success: boolean
+  data?: T
+  error?: string
+}

package/template/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './api'
+export * from './table'

package/template/src/types/table.ts

@@ -0,0 +1,34 @@
+import type { ColumnDef, Table, Row } from '@tanstack/react-table'
+
+export type DataTableColumn<TData, TValue = unknown> = ColumnDef<TData, TValue>
+
+export interface DataTableProps<TData, TValue> {
+  columns: DataTableColumn<TData, TValue>[]
+  data: TData[]
+  searchKey?: string
+  searchPlaceholder?: string
+}
+
+export interface DataTablePaginationProps<TData> {
+  table: Table<TData>
+}
+
+export interface DataTableToolbarProps<TData> {
+  table: Table<TData>
+  searchKey?: string
+  searchPlaceholder?: string
+}
+
+export interface DataTableRowActionsProps<TData> {
+  row: Row<TData>
+}
+
+export interface DataTableFacetedFilterProps<TData, TValue> {
+  column?: import('@tanstack/react-table').Column<TData, TValue>
+  title?: string
+  options: {
+    label: string
+    value: string
+    icon?: React.ComponentType<{ className?: string }>
+  }[]
+}

package/template/supabase/config.toml

@@ -0,0 +1,94 @@
+# A string used to distinguish different Supabase projects on the same host. Defaults to the
+# working directory name when running `supabase init`.
+project_id = "lft-app"
+
+[api]
+enabled = true
+# Port to use for the API URL.
+port = 54321
+# Schemas to expose in your API. Tables, views and stored procedures in this schema will get API
+# endpoints. public and storage are always included.
+schemas = ["public", "storage", "graphql_public"]
+# Extra schemas to add to the search_path of every request. public is always included.
+extra_search_path = ["public", "extensions"]
+# The maximum number of rows returns from a view, table, or stored procedure. Limits payload size
+# for accidental or malicious requests.
+max_rows = 1000
+
+[db]
+# Port to use for the local database URL.
+port = 54322
+# Port used by db diff command to initialise the shadow database.
+shadow_port = 54320
+# The database major version to use. This has to be the same as your remote database's. Run `SHOW
+# server_version;` on the remote database to check.
+major_version = 15
+
+[studio]
+enabled = true
+# Port to use for Supabase Studio.
+port = 54323
+# External URL of the API server that frontend connects to.
+api_url = "http://localhost"
+
+# Email testing server. Emails sent with the local dev setup are not actually sent - rather, they
+# are monitored, and you can view the emails that would have been sent from the web interface.
+[inbucket]
+enabled = true
+# Port to use for the email testing server web interface.
+port = 54324
+# Uncomment to expose additional ports for testing user applications that send emails.
+# smtp_port = 54325
+# pop3_port = 54326
+
+[storage]
+enabled = true
+# The maximum file size allowed (e.g. "5MB", "500KB").
+file_size_limit = "50MiB"
+
+[auth]
+enabled = true
+# The base URL of your website. Used as an allow-list for redirects and for constructing URLs used
+# in emails.
+site_url = "http://localhost:3000"
+# A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
+additional_redirect_urls = ["https://localhost:3000"]
+# How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
+jwt_expiry = 3600
+# If disabled, the refresh token will never expire.
+enable_refresh_token_rotation = true
+# Allows refresh tokens to be reused after expiry, up to the specified interval in seconds.
+# Requires enable_refresh_token_rotation = true.
+refresh_token_reuse_interval = 10
+# Allow/disallow new user signups to your project.
+enable_signup = true
+
+[auth.email]
+# Allow/disallow new user signups via email to your project.
+enable_signup = true
+# If enabled, a user will be required to confirm any email change on both the old, and new email
+# addresses. If disabled, only the new email is required to confirm.
+double_confirm_changes = true
+# If enabled, users need to confirm their email address before signing in.
+enable_confirmations = false
+
+[auth.sms]
+# Allow/disallow new user signups via SMS to your project.
+enable_signup = true
+# If enabled, users need to confirm their phone number before signing in.
+enable_confirmations = false
+
+# Configure one of the supported SMS providers: `twilio`, `twilio_verify`, `messagebird`, `textlocal`, `vonage`.
+[auth.sms.twilio]
+enabled = false
+account_sid = ""
+message_service_sid = ""
+# DO NOT commit your Twilio auth token to git. Use environment variable substitution instead:
+auth_token = "env(SUPABASE_AUTH_SMS_TWILIO_AUTH_TOKEN)"
+
+[analytics]
+enabled = false
+port = 54327
+vector_port = 54328
+# Configure one of the supported backends: `postgres`, `bigquery`.
+backend = "postgres"

package/template/tsconfig.json

@@ -36,6 +36,7 @@
     ".next/dev/types/**/*.ts"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "supabase/functions"
   ]
 }