@create-lft-app/nextjs 3.2.0 → 3.3.0

package/template/src/components/tables/data-table-pagination.tsx

@@ -1,99 +1,99 @@
-'use client'
-
-import { Table } from '@tanstack/react-table'
-import {
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-} from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>
-}
-
-export function DataTablePagination<TData>({
-  table,
-}: DataTablePaginationProps<TData>) {
-  return (
-    <div className="flex items-center justify-between px-2">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} de{' '}
-        {table.getFilteredRowModel().rows.length} fila(s) seleccionada(s).
-      </div>
-      <div className="flex items-center space-x-6 lg:space-x-8">
-        <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">Filas por página</p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger className="h-8 w-[70px]">
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[10, 20, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          Página {table.getState().pagination.pageIndex + 1} de{' '}
-          {table.getPageCount()}
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Ir a primera página</span>
-            <ChevronsLeft className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Ir a página anterior</span>
-            <ChevronLeft className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Ir a página siguiente</span>
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Ir a última página</span>
-            <ChevronsRight className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
+'use client'
+
+import { Table } from '@tanstack/react-table'
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTablePagination<TData>({
+  table,
+}: DataTablePaginationProps<TData>) {
+  return (
+    <div className="flex items-center justify-between px-2">
+      <div className="flex-1 text-sm text-muted-foreground">
+        {table.getFilteredSelectedRowModel().rows.length} de{' '}
+        {table.getFilteredRowModel().rows.length} fila(s) seleccionada(s).
+      </div>
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Filas por página</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value))
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Página {table.getState().pagination.pageIndex + 1} de{' '}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Ir a primera página</span>
+            <ChevronsLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Ir a página anterior</span>
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Ir a página siguiente</span>
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Ir a última página</span>
+            <ChevronsRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/src/components/tables/data-table-toolbar.tsx

@@ -1,140 +1,140 @@
-'use client'
-
-import * as React from 'react'
-import { Table } from '@tanstack/react-table'
-import { Filter, X } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { DataTableFacetedFilter } from './data-table-faceted-filter'
-import { DataTableDateFilter } from './data-table-date-filter'
-import { DataTableNumberFilter } from './data-table-number-filter'
-import { DataTableFiltersDropdown } from './data-table-filters-dropdown'
-import type { FilterConfig } from './data-table'
-
-interface DataTableToolbarProps<TData> {
-  table: Table<TData>
-  searchKey?: string
-  searchPlaceholder?: string
-  filters?: FilterConfig[]
-  /** Modo de visualización: 'dropdown' agrupa filtros, 'inline' los muestra en línea, 'inline-collapsible' los muestra en línea pero ocultables */
-  filterMode?: 'dropdown' | 'inline' | 'inline-collapsible'
-}
-
-export function DataTableToolbar<TData>({
-  table,
-  searchKey,
-  searchPlaceholder = 'Buscar...',
-  filters,
-  filterMode = 'dropdown',
-}: DataTableToolbarProps<TData>) {
-  const isFiltered = table.getState().columnFilters.length > 0
-  const [showFilters, setShowFilters] = React.useState(false)
-
-  const renderFilters = () => {
-    return filters?.map((filter) => {
-      const column = table.getColumn(filter.columnId)
-      if (!column) return null
-
-      if (filter.type === 'faceted' && filter.options) {
-        return (
-          <DataTableFacetedFilter
-            key={filter.columnId}
-            column={column}
-            title={filter.title}
-            options={filter.options}
-          />
-        )
-      }
-
-      if (filter.type === 'date-range') {
-        return (
-          <DataTableDateFilter
-            key={filter.columnId}
-            column={column}
-            title={filter.title}
-          />
-        )
-      }
-
-      if (filter.type === 'number-range') {
-        return (
-          <DataTableNumberFilter
-            key={filter.columnId}
-            column={column}
-            title={filter.title}
-            format={filter.format}
-            currencySymbol={filter.currencySymbol}
-            step={filter.step}
-          />
-        )
-      }
-
-      return null
-    })
-  }
-
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center justify-between">
-        <div className="flex flex-1 flex-wrap items-center gap-2">
-          {searchKey && (
-            <Input
-              placeholder={searchPlaceholder}
-              value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ''}
-              onChange={(event) =>
-                table.getColumn(searchKey)?.setFilterValue(event.target.value)
-              }
-              className="h-8 w-[150px] lg:w-[250px]"
-            />
-          )}
-
-          {/* Modo dropdown: un solo botón que agrupa filtros */}
-          {filterMode === 'dropdown' && filters && filters.length > 0 && (
-            <DataTableFiltersDropdown table={table} filters={filters} />
-          )}
-
-          {/* Modo inline: filtros visibles individualmente */}
-          {filterMode === 'inline' && renderFilters()}
-
-          {/* Modo inline-collapsible: botón para mostrar/ocultar filtros */}
-          {filterMode === 'inline-collapsible' && filters && filters.length > 0 && (
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-8 border-dashed"
-              onClick={() => setShowFilters(!showFilters)}
-            >
-              <Filter className="mr-2 h-4 w-4" />
-              Filtros
-              {isFiltered && (
-                <span className="ml-2 rounded-full bg-primary px-1.5 py-0.5 text-xs text-primary-foreground">
-                  {table.getState().columnFilters.length}
-                </span>
-              )}
-            </Button>
-          )}
-
-          {/* Botón limpiar para modos inline */}
-          {(filterMode === 'inline' || (filterMode === 'inline-collapsible' && showFilters)) && isFiltered && (
-            <Button
-              variant="ghost"
-              onClick={() => table.resetColumnFilters()}
-              className="h-8 px-2 lg:px-3"
-            >
-              Limpiar
-              <X className="ml-2 h-4 w-4" />
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* Filtros inline colapsables - fila separada */}
-      {filterMode === 'inline-collapsible' && showFilters && filters && filters.length > 0 && (
-        <div className="flex flex-wrap items-center gap-2">
-          {renderFilters()}
-        </div>
-      )}
-    </div>
-  )
-}
+'use client'
+
+import * as React from 'react'
+import { Table } from '@tanstack/react-table'
+import { Filter, X } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { DataTableFacetedFilter } from './data-table-faceted-filter'
+import { DataTableDateFilter } from './data-table-date-filter'
+import { DataTableNumberFilter } from './data-table-number-filter'
+import { DataTableFiltersDropdown } from './data-table-filters-dropdown'
+import type { FilterConfig } from './data-table'
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>
+  searchKey?: string
+  searchPlaceholder?: string
+  filters?: FilterConfig[]
+  /** Modo de visualización: 'dropdown' agrupa filtros, 'inline' los muestra en línea, 'inline-collapsible' los muestra en línea pero ocultables */
+  filterMode?: 'dropdown' | 'inline' | 'inline-collapsible'
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  searchKey,
+  searchPlaceholder = 'Buscar...',
+  filters,
+  filterMode = 'dropdown',
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = table.getState().columnFilters.length > 0
+  const [showFilters, setShowFilters] = React.useState(false)
+
+  const renderFilters = () => {
+    return filters?.map((filter) => {
+      const column = table.getColumn(filter.columnId)
+      if (!column) return null
+
+      if (filter.type === 'faceted' && filter.options) {
+        return (
+          <DataTableFacetedFilter
+            key={filter.columnId}
+            column={column}
+            title={filter.title}
+            options={filter.options}
+          />
+        )
+      }
+
+      if (filter.type === 'date-range') {
+        return (
+          <DataTableDateFilter
+            key={filter.columnId}
+            column={column}
+            title={filter.title}
+          />
+        )
+      }
+
+      if (filter.type === 'number-range') {
+        return (
+          <DataTableNumberFilter
+            key={filter.columnId}
+            column={column}
+            title={filter.title}
+            format={filter.format}
+            currencySymbol={filter.currencySymbol}
+            step={filter.step}
+          />
+        )
+      }
+
+      return null
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <div className="flex flex-1 flex-wrap items-center gap-2">
+          {searchKey && (
+            <Input
+              placeholder={searchPlaceholder}
+              value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ''}
+              onChange={(event) =>
+                table.getColumn(searchKey)?.setFilterValue(event.target.value)
+              }
+              className="h-8 w-[150px] lg:w-[250px]"
+            />
+          )}
+
+          {/* Modo dropdown: un solo botón que agrupa filtros */}
+          {filterMode === 'dropdown' && filters && filters.length > 0 && (
+            <DataTableFiltersDropdown table={table} filters={filters} />
+          )}
+
+          {/* Modo inline: filtros visibles individualmente */}
+          {filterMode === 'inline' && renderFilters()}
+
+          {/* Modo inline-collapsible: botón para mostrar/ocultar filtros */}
+          {filterMode === 'inline-collapsible' && filters && filters.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 border-dashed"
+              onClick={() => setShowFilters(!showFilters)}
+            >
+              <Filter className="mr-2 h-4 w-4" />
+              Filtros
+              {isFiltered && (
+                <span className="ml-2 rounded-full bg-primary px-1.5 py-0.5 text-xs text-primary-foreground">
+                  {table.getState().columnFilters.length}
+                </span>
+              )}
+            </Button>
+          )}
+
+          {/* Botón limpiar para modos inline */}
+          {(filterMode === 'inline' || (filterMode === 'inline-collapsible' && showFilters)) && isFiltered && (
+            <Button
+              variant="ghost"
+              onClick={() => table.resetColumnFilters()}
+              className="h-8 px-2 lg:px-3"
+            >
+              Limpiar
+              <X className="ml-2 h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Filtros inline colapsables - fila separada */}
+      {filterMode === 'inline-collapsible' && showFilters && filters && filters.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2">
+          {renderFilters()}
+        </div>
+      )}
+    </div>
+  )
+}

package/template/src/components/tables/data-table-view-options.tsx

@@ -1,63 +1,63 @@
-'use client'
-
-import * as React from 'react'
-import { Table } from '@tanstack/react-table'
-import { Settings2 } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-
-interface DataTableViewOptionsProps<TData> {
-  table: Table<TData>
-}
-
-export function DataTableViewOptions<TData>({
-  table,
-}: DataTableViewOptionsProps<TData>) {
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-8 w-8"
-        >
-          <Settings2 className="h-4 w-4" />
-          <span className="sr-only">Columnas</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[150px]">
-        <DropdownMenuLabel>Mostrar columnas</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {table
-          .getAllColumns()
-          .filter(
-            (column) =>
-              typeof column.accessorFn !== 'undefined' && column.getCanHide()
-          )
-          .map((column) => {
-            return (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                className="capitalize"
-                checked={column.getIsVisible()}
-                onSelect={(e) => e.preventDefault()}
-                onCheckedChange={(value) => column.toggleVisibility(!!value)}
-              >
-                {column.id}
-              </DropdownMenuCheckboxItem>
-            )
-          })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
+'use client'
+
+import * as React from 'react'
+import { Table } from '@tanstack/react-table'
+import { Settings2 } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+        >
+          <Settings2 className="h-4 w-4" />
+          <span className="sr-only">Columnas</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Mostrar columnas</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== 'undefined' && column.getCanHide()
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onSelect={(e) => e.preventDefault()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            )
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}