@create-lft-app/nextjs 3.2.0 → 3.3.0

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

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