@create-lft-app/nextjs 3.2.0 → 3.3.0

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

@@ -1,185 +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>
-  )
-}
+'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

@@ -1,130 +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>
-  )
-}
+'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>
+  )
+}