diff --git a/apps/web/app/(dashboard)/conciliacion/page.tsx b/apps/web/app/(dashboard)/conciliacion/page.tsx index ea026e9..67d314f 100644 --- a/apps/web/app/(dashboard)/conciliacion/page.tsx +++ b/apps/web/app/(dashboard)/conciliacion/page.tsx @@ -4,7 +4,7 @@ import { useState, useEffect } from 'react'; import { useCfdisConConciliacion, useConciliar, useDesconciliar } from '@/lib/hooks/use-conciliacion'; import { useBancos } from '@/lib/hooks/use-bancos'; import { useRegimenesDelPeriodo } from '@/lib/hooks/use-dashboard'; -import { PeriodSelector, RegimenSelector } from '@horux/shared-ui'; +import { PeriodSelector, RegimenSelector, useDebounce } from '@horux/shared-ui'; import { CfdiViewerModal } from '@/components/cfdi/cfdi-viewer-modal'; import { Header } from '@/components/layouts/header'; import { Card, CardContent, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Input, Label, Popover, PopoverTrigger, PopoverContent } from '@horux/shared-ui'; @@ -29,6 +29,75 @@ function getMonthRange(year: number, month: number) { return { start, end }; } +function FilterHeader({ + label, + filterKey, + filters, + setFilters, + openFilter, + setOpenFilter, +}: { + label: string; + filterKey: string; + filters: { rfcEmisor: string; nombreEmisor: string; rfcReceptor: string; nombreReceptor: string }; + setFilters: React.Dispatch>; + openFilter: string | null; + setOpenFilter: (v: string | null) => void; +}) { + const rawValue = (filters as any)[filterKey] || ''; + const [localValue, setLocalValue] = useState(rawValue); + const debouncedValue = useDebounce(localValue, 300); + + // Sync local state when popover opens or external filter changes + useEffect(() => { + setLocalValue(rawValue); + }, [rawValue, openFilter === filterKey]); + + // Update parent filter only when debounced value changes + useEffect(() => { + if (debouncedValue !== rawValue) { + setFilters((prev: any) => ({ ...prev, [filterKey]: debouncedValue })); + } + }, [debouncedValue]); + + const hasFilter = !!rawValue; + return ( +
+ {label} + setOpenFilter(open ? filterKey : null)}> + + + + +
+

Filtrar por {label}

+
+ + setLocalValue(e.target.value)} + autoFocus + /> +
+
+ + {hasFilter && ( + + )} +
+
+
+
+
+ ); +} + export default function ConciliacionPage() { const now = new Date(); const defaultRange = getMonthRange(now.getFullYear(), now.getMonth() + 1); @@ -163,58 +232,6 @@ export default function ConciliacionPage() { return sorted; } - function FilterHeader({ - label, - filterKey, - filters, - setFilters, - openFilter, - setOpenFilter, - }: { - label: string; - filterKey: string; - filters: { rfcEmisor: string; nombreEmisor: string; rfcReceptor: string; nombreReceptor: string }; - setFilters: React.Dispatch>; - openFilter: string | null; - setOpenFilter: (v: string | null) => void; - }) { - const hasFilter = !!(filters as any)[filterKey]; - return ( -
- {label} - setOpenFilter(open ? filterKey : null)}> - - - - -
-

Filtrar por {label}

-
- - setFilters((prev: any) => ({ ...prev, [filterKey]: e.target.value }))} - /> -
-
- - {hasFilter && ( - - )} -
-
-
-
-
- ); - } - const pendientesOrdenados = sortCfdis( pendientes.filter((c) => matchesColumnFilters(c, filtersPendientes)), sortPendientes