@create-lft-app/nextjs 3.1.0 → 3.2.0

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

@@ -0,0 +1,203 @@
+'use client'
+
+import * as React from 'react'
+import { Column } from '@tanstack/react-table'
+import { CalendarIcon, X } from 'lucide-react'
+import { DateRange } from 'react-day-picker'
+
+import { cn } from '@/lib/utils'
+import { formatDateShort } from '@/lib/date'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+
+interface DataTableDateFilterProps<TData> {
+  column?: Column<TData, unknown>
+  title?: string
+}
+
+export function DataTableDateFilter<TData>({
+  column,
+  title = 'Fecha',
+}: DataTableDateFilterProps<TData>) {
+  const filterValue = column?.getFilterValue() as DateRange | undefined
+  const [open, setOpen] = React.useState(false)
+
+  // Sincronizar estado local con el filtro de la columna
+  // Esto permite que "Limpiar" del toolbar resetee este filtro
+  React.useEffect(() => {
+    if (!filterValue) {
+      setDate(undefined)
+    }
+  }, [filterValue])
+
+  const [date, setDate] = React.useState<DateRange | undefined>(filterValue)
+
+  const handleSelect = (range: DateRange | undefined) => {
+    setDate(range)
+    // No aplicamos el filtro inmediatamente, esperamos al botón Aplicar
+  }
+
+  const handleApply = () => {
+    column?.setFilterValue(date)
+    setOpen(false)
+  }
+
+  const handleClear = () => {
+    setDate(undefined)
+    column?.setFilterValue(undefined)
+  }
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      // Al cerrar sin aplicar, resetear al valor actual del filtro
+      setDate(filterValue)
+    }
+    setOpen(isOpen)
+  }
+
+  const hasFilter = date?.from || date?.to
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn(
+            'h-8 border-dashed',
+            hasFilter && 'border-solid'
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {hasFilter ? (
+            <span className="flex items-center gap-1">
+              {date?.from && formatDateShort(date.from)}
+              {date?.to && ` - ${formatDateShort(date.to)}`}
+            </span>
+          ) : (
+            title
+          )}
+          {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-auto p-0"
+        side="bottom"
+        align="start"
+        sideOffset={4}
+      >
+        <div className="flex flex-col">
+          <div className="flex items-center gap-2 border-b border-border p-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={() => {
+                const today = new Date()
+                setDate({ from: today, to: today })
+              }}
+            >
+              Hoy
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={() => {
+                const today = new Date()
+                const weekAgo = new Date(today)
+                weekAgo.setDate(today.getDate() - 7)
+                setDate({ from: weekAgo, to: today })
+              }}
+            >
+              Última semana
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              onClick={() => {
+                const today = new Date()
+                const monthAgo = new Date(today)
+                monthAgo.setMonth(today.getMonth() - 1)
+                setDate({ from: monthAgo, to: today })
+              }}
+            >
+              Último mes
+            </Button>
+          </div>
+          <Calendar
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={handleSelect}
+            numberOfMonths={2}
+          />
+          <div className="flex gap-2 border-t border-border p-3">
+            <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 dateRangeFilterFn<TData>(
+  row: { getValue: (id: string) => unknown },
+  columnId: string,
+  filterValue: DateRange | undefined
+): boolean {
+  if (!filterValue?.from) return true
+
+  const cellValue = row.getValue(columnId)
+  if (!cellValue) return false
+
+  const date = new Date(cellValue as string)
+  const from = filterValue.from
+  const to = filterValue.to || from
+
+  // Reset hours for comparison
+  const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+  const fromOnly = new Date(from.getFullYear(), from.getMonth(), from.getDate())
+  const toOnly = new Date(to.getFullYear(), to.getMonth(), to.getDate())
+
+  return dateOnly >= fromOnly && dateOnly <= toOnly
+}

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