@create-lft-app/nextjs 3.2.0 → 3.3.0

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

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