@create-lft-app/nextjs 3.1.0 → 3.3.0

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

@@ -0,0 +1,185 @@
+'use client'
+
+import * as React from 'react'
+import { Column } from '@tanstack/react-table'
+import { Check, PlusCircle } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Separator } from '@/components/ui/separator'
+
+export interface FacetedFilterOption {
+  label: string
+  value: string
+  icon?: React.ComponentType<{ className?: string }>
+}
+
+interface DataTableFacetedFilterProps<TData, TValue> {
+  column?: Column<TData, TValue>
+  title?: string
+  options: FacetedFilterOption[]
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues()
+  const filterValue = column?.getFilterValue() as string[] | undefined
+  const [open, setOpen] = React.useState(false)
+  const [selectedValues, setSelectedValues] = React.useState<Set<string>>(
+    new Set(filterValue)
+  )
+
+  // Sincronizar estado local con el filtro de la columna
+  React.useEffect(() => {
+    setSelectedValues(new Set(filterValue))
+  }, [filterValue])
+
+  const handleApply = () => {
+    const filterValues = Array.from(selectedValues)
+    column?.setFilterValue(filterValues.length ? filterValues : undefined)
+    setOpen(false)
+  }
+
+  const handleClear = () => {
+    setSelectedValues(new Set())
+    column?.setFilterValue(undefined)
+  }
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      // Al cerrar sin aplicar, resetear al valor actual del filtro
+      setSelectedValues(new Set(filterValue))
+    }
+    setOpen(isOpen)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 border-dashed"
+        >
+          <PlusCircle className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} seleccionados
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" side="bottom" align="start" sideOffset={4}>
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>Sin resultados.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value)
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      const newSelected = new Set(selectedValues)
+                      if (isSelected) {
+                        newSelected.delete(option.value)
+                      } else {
+                        newSelected.add(option.value)
+                      }
+                      setSelectedValues(newSelected)
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                        isSelected
+                          ? 'bg-primary text-primary-foreground'
+                          : 'opacity-50 [&_svg]:invisible'
+                      )}
+                    >
+                      <Check className="h-4 w-4" />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                )
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+        <div className="flex gap-2 border-t border-border p-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={handleClear}
+          >
+            Limpiar
+          </Button>
+          <Button
+            size="sm"
+            className="flex-1"
+            onClick={handleApply}
+          >
+            Aplicar
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/template/src/components/tables/data-table-filters-dropdown.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import * as React from 'react'
+import { Table } from '@tanstack/react-table'
+import { Filter, X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Separator } from '@/components/ui/separator'
+import { DataTableFacetedFilter } from './data-table-faceted-filter'
+import { DataTableDateFilter } from './data-table-date-filter'
+import { DataTableNumberFilter } from './data-table-number-filter'
+import type { FilterConfig } from './data-table'
+
+interface DataTableFiltersDropdownProps<TData> {
+  table: Table<TData>
+  filters: FilterConfig[]
+}
+
+export function DataTableFiltersDropdown<TData>({
+  table,
+  filters,
+}: DataTableFiltersDropdownProps<TData>) {
+  const [open, setOpen] = React.useState(false)
+
+  // Contar filtros activos (excluyendo el search)
+  const activeFiltersCount = table.getState().columnFilters.filter(
+    (filter) => filters.some((f) => f.columnId === filter.id)
+  ).length
+
+  const handleClearAll = () => {
+    // Solo limpiar los filtros configurados, no el search
+    filters.forEach((filter) => {
+      table.getColumn(filter.columnId)?.setFilterValue(undefined)
+    })
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn(
+            'h-8 border-dashed',
+            activeFiltersCount > 0 && 'border-solid'
+          )}
+        >
+          <Filter className="mr-2 h-4 w-4" />
+          Filtros
+          {activeFiltersCount > 0 && (
+            <Badge
+              variant="secondary"
+              className="ml-2 rounded-sm px-1 font-normal"
+            >
+              {activeFiltersCount}
+            </Badge>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[320px] p-0" align="start">
+        <div className="flex flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+            <span className="text-sm font-medium">Filtros</span>
+            {activeFiltersCount > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-xs"
+                onClick={handleClearAll}
+              >
+                Limpiar todo
+                <X className="ml-1 h-3 w-3" />
+              </Button>
+            )}
+          </div>
+
+          {/* Filters */}
+          <div className="flex flex-col gap-3 p-4">
+            {filters.map((filter, index) => {
+              const column = table.getColumn(filter.columnId)
+              if (!column) return null
+
+              return (
+                <div key={filter.columnId} className="flex flex-col gap-2">
+                  {index > 0 && <Separator className="my-1" />}
+                  <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    {filter.title}
+                  </label>
+
+                  {filter.type === 'faceted' && filter.options && (
+                    <DataTableFacetedFilter
+                      column={column}
+                      title={filter.title}
+                      options={filter.options}
+                    />
+                  )}
+
+                  {filter.type === 'date-range' && (
+                    <DataTableDateFilter
+                      column={column}
+                      title={filter.title}
+                    />
+                  )}
+
+                  {filter.type === 'number-range' && (
+                    <DataTableNumberFilter
+                      column={column}
+                      title={filter.title}
+                      format={filter.format}
+                      currencySymbol={filter.currencySymbol}
+                      step={filter.step}
+                    />
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

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
+}