@create-lft-app/nextjs 3.1.0 → 3.2.0

package/template/src/components/tables/data-table-number-filter.tsx

@@ -0,0 +1,295 @@
+'use client'
+
+import * as React from 'react'
+import { Column } from '@tanstack/react-table'
+import { DollarSign, X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { DEFAULT_LOCALE } from '@/lib/date'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+
+export interface NumberRange {
+  min?: number
+  max?: number
+}
+
+interface DataTableNumberFilterProps<TData> {
+  column?: Column<TData, unknown>
+  title?: string
+  /** Formato para mostrar el número (ej: 'currency', 'number') */
+  format?: 'currency' | 'number'
+  /** Símbolo de moneda (default: '$') */
+  currencySymbol?: string
+  /** Paso para los inputs (default: 1) */
+  step?: number
+}
+
+export function DataTableNumberFilter<TData>({
+  column,
+  title = 'Monto',
+  format = 'number',
+  currencySymbol = '$',
+  step = 1,
+}: DataTableNumberFilterProps<TData>) {
+  const filterValue = column?.getFilterValue() as NumberRange | undefined
+  const [open, setOpen] = React.useState(false)
+
+  // Sincronizar estado local con el filtro de la columna
+  React.useEffect(() => {
+    if (!filterValue) {
+      setRange({ min: undefined, max: undefined })
+    }
+  }, [filterValue])
+
+  const [range, setRange] = React.useState<NumberRange>({
+    min: filterValue?.min,
+    max: filterValue?.max,
+  })
+
+  const handleMinChange = (value: string) => {
+    const min = value === '' ? undefined : Number(value)
+    const newRange = { ...range, min }
+    setRange(newRange)
+  }
+
+  const handleMaxChange = (value: string) => {
+    const max = value === '' ? undefined : Number(value)
+    const newRange = { ...range, max }
+    setRange(newRange)
+  }
+
+  const handleApply = () => {
+    if (range.min === undefined && range.max === undefined) {
+      column?.setFilterValue(undefined)
+    } else {
+      column?.setFilterValue(range)
+    }
+    setOpen(false)
+  }
+
+  const handleClear = () => {
+    setRange({ min: undefined, max: undefined })
+    column?.setFilterValue(undefined)
+  }
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      // Al cerrar sin aplicar, resetear al valor actual del filtro
+      setRange({
+        min: filterValue?.min,
+        max: filterValue?.max,
+      })
+    }
+    setOpen(isOpen)
+  }
+
+  const formatNumber = (num: number) => {
+    if (format === 'currency') {
+      return `${currencySymbol}${num.toLocaleString(DEFAULT_LOCALE)}`
+    }
+    return num.toLocaleString(DEFAULT_LOCALE)
+  }
+
+  const hasFilter = filterValue?.min !== undefined || filterValue?.max !== undefined
+
+  const getDisplayText = () => {
+    if (!hasFilter) return title
+
+    const { min, max } = filterValue!
+    if (min !== undefined && max !== undefined) {
+      return `${formatNumber(min)} - ${formatNumber(max)}`
+    }
+    if (min !== undefined) {
+      return `≥ ${formatNumber(min)}`
+    }
+    if (max !== undefined) {
+      return `≤ ${formatNumber(max)}`
+    }
+    return title
+  }
+
+  const Icon = format === 'currency' ? DollarSign : () => <span className="text-xs font-medium">#</span>
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn(
+            'h-8 border-dashed',
+            hasFilter && 'border-solid'
+          )}
+        >
+          <Icon className="mr-2 h-4 w-4" />
+          <span className="max-w-[150px] truncate">{getDisplayText()}</span>
+          {hasFilter && (
+            <span
+              role="button"
+              tabIndex={0}
+              onClick={(e) => {
+                e.stopPropagation()
+                handleClear()
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.stopPropagation()
+                  handleClear()
+                }
+              }}
+              className="ml-2 rounded-full p-0.5 hover:bg-muted"
+            >
+              <X className="h-3 w-3" />
+            </span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[280px] p-4" side="bottom" align="start" sideOffset={4}>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <label className="text-sm font-medium text-foreground">
+              Rango de {title.toLowerCase()}
+            </label>
+            <div className="flex items-center gap-2">
+              <div className="relative flex-1">
+                {format === 'currency' && (
+                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
+                    {currencySymbol}
+                  </span>
+                )}
+                <Input
+                  type="number"
+                  placeholder="Mín"
+                  value={range.min ?? ''}
+                  onChange={(e) => handleMinChange(e.target.value)}
+                  step={step}
+                  className={cn(
+                    'h-9',
+                    format === 'currency' && 'pl-7'
+                  )}
+                />
+              </div>
+              <span className="text-muted-foreground">-</span>
+              <div className="relative flex-1">
+                {format === 'currency' && (
+                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
+                    {currencySymbol}
+                  </span>
+                )}
+                <Input
+                  type="number"
+                  placeholder="Máx"
+                  value={range.max ?? ''}
+                  onChange={(e) => handleMaxChange(e.target.value)}
+                  step={step}
+                  className={cn(
+                    'h-9',
+                    format === 'currency' && 'pl-7'
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Presets rápidos */}
+          <div className="flex flex-wrap gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={() => {
+                setRange({ min: 0, max: 100 })
+              }}
+            >
+              0-100
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={() => {
+                setRange({ min: 100, max: 500 })
+              }}
+            >
+              100-500
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={() => {
+                setRange({ min: 500, max: 1000 })
+              }}
+            >
+              500-1K
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={() => {
+                setRange({ min: 1000, max: undefined })
+              }}
+            >
+              +1K
+            </Button>
+          </div>
+
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              className="flex-1"
+              onClick={handleClear}
+            >
+              Limpiar
+            </Button>
+            <Button
+              size="sm"
+              className="flex-1"
+              onClick={handleApply}
+            >
+              Aplicar
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+// Filter function para usar con TanStack Table
+export function numberRangeFilterFn<TData>(
+  row: { getValue: (id: string) => unknown },
+  columnId: string,
+  filterValue: NumberRange | undefined
+): boolean {
+  if (!filterValue) return true
+  if (filterValue.min === undefined && filterValue.max === undefined) return true
+
+  const cellValue = row.getValue(columnId)
+  if (cellValue === null || cellValue === undefined) return false
+
+  const value = Number(cellValue)
+  if (isNaN(value)) return false
+
+  const { min, max } = filterValue
+
+  if (min !== undefined && max !== undefined) {
+    return value >= min && value <= max
+  }
+  if (min !== undefined) {
+    return value >= min
+  }
+  if (max !== undefined) {
+    return value <= max
+  }
+
+  return true
+}

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,50 +1,140 @@
-'use client'
-
-import { Table } from '@tanstack/react-table'
-import { X } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { DataTableViewOptions } from './data-table-view-options'
-
-interface DataTableToolbarProps<TData> {
-  table: Table<TData>
-  searchKey?: string
-  searchPlaceholder?: string
-}
-
-export function DataTableToolbar<TData>({
-  table,
-  searchKey,
-  searchPlaceholder = 'Buscar...',
-}: DataTableToolbarProps<TData>) {
-  const isFiltered = table.getState().columnFilters.length > 0
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex flex-1 items-center space-x-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]"
-          />
-        )}
-        {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>
-      <DataTableViewOptions table={table} />
-    </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>
+  )
+}